Search code examples
csspolymerweb-componentshadow-dom

Light DOM style cascades down to the shadow DOM


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: enter image description here


Solution

  • 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.