Invasive CSS - Shadow DOM test

If the DOM is not isolated, a customer's CSS can apply to our components. This results in the Bubble looking wrong, for example:

• logos and controls are moved around by margin/padding
• images or divs have wrong sizing
• Items have wrong colors

To avoid this, the bubble's DOM can be isolated with a Shadow DOM root. Both the bubbles and the player can be affected.

In the examples below, CSS is applied to make the following changes:

• Change the stroke color of the bubble circle to pink.
• Reduce the font size of the title to 12px.
• Desaturate the thumbnail image.

When opening players, CSS is applied to make the following changes:

• The video is desaturated.
• SVG images have a pink stroke and fill, including the gobi logo.
• Buttons have a red, dashed outline.
• Buttons have a large bottom margin, pushing them upwards.
• Stickers have a pink background.
• Buttons have a label attached with the text 'Invasive'.

When shadowDom is enabled and correctly implemented, none of the above changes should be applied.