Light DOM style cascades down to the shadow DOM

Question

I have created a custom element with polymer. When the element is included within an h2, it inherits the h2's boldness and font-size. I need my components to be sheltered from the outside world and not be affected by light dom styles. How can I achieve this if the light DOM cascades down?

To be more specific, check out the following:

Answer 1

This appears to be by design:

The top-level elements of a shadow tree inherit from their host element.

The host element in this case is the h2.

You will need to include explicit size and weight declarations in your custom element's CSS in order to prevent it from inheriting the styles from its host element.

Answer 2

You can reset your CSS to the browsers defaults using all: initial; in the :host

:host {
    all: initial;
}

Not supported in IE or Edge but neither is shadow DOM.

Another option is to use a CSS reset in your web component such as normalize.css

Apparently there are browser optimisations in place to handle identical CSS in multiple web components so it's not as inefficient as it sounds.