CODEWITHSUNDEEP
csspolymerweb-componentshadow-dom
dipole_moment
dipole_moment

Reputation: 5874

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

Upvotes: 3

Views: 789

Answers (2)

Craig
Craig

Reputation: 2153

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.

Upvotes: 0

BoltClock
BoltClock

Reputation: 724452

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.

Upvotes: 4

Related Questions