Web component host reset

[OhiraKyou]

I've been using this reset with web components (via LitElement). In doing so, I've found that the reset (both unset: all and display: revert) causes a lot of problems related to styling the :host (shadow root) selector.

Problem

Research suggests that the specificity for the :host selector is intended to make it act as the default style for a custom element. Therefore, it is expected to be overridden by any other styles.

That places the shadow root in quite an awkward position following a reset. After all, the purpose of a reset is to strip browser styling. After that, any user-authored styling (including the defaults of custom elements) should be respected.

Solution

My solution is to add display: contents !important to the :host selector in each component. Then, if a custom root is desired, it can be implemented as a separate class, applied to a container element (like a div).

/* Pass through root */
:host {
	display: contents !important;
}

/* Custom root */
.container {
	display: flex;
}

This solution is ideal in my case, because I don't like that shadow roots participate in the document layout in the first place; I prefer the pass-through behavior of React fragments (<></>).

Related

Related external links:

• Is it possible to increase specificity host selector shadow root custom element?
• Why do element selectors supersede the :host selector in custom elements with shadow DOM

[tomprince]

If I am reading this correctly, the issue descried above is discussing the use of the-new-css-reset within a component. It appears that it also can occur when using it in a page that is consuming a web component.

For example,

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js" />
<ion-icon name="heart" />

displays a heart inline, where as

<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/reset.css" />
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js" />
<ion-icon name="heart" />

displays a huge heart.

[OhiraKyou]

Yep. Because use of the :host selector is treated as default element styling—rather than authored styling—by its specificity, it gets overridden by resets (which override default element styling) anywhere they are used. The display: contents !important solution has been working pretty well, though.

[Darrenbydesign]

I too am running into this problem and its making it very difficult to even consider using this reset as a result. I wish there was a way to include the :host selector in the where clause like so :where(:not([elements here] , :host):not([other stuff]))

Anyone else find a way around this? The reset does a 90% good job for my design system needs but this is a big 10% problem

[axoplasm]

If I am reading this correctly, the issue descried above is discussing the use of the-new-css-reset within a component. It appears that it also can occur when using it in a page that is consuming a web component.

This is also my experience. My workaround was to reset the relevant properties manually, e.g:

ion-icon {
    fill: currentcolor;
    height: 1em;
    width: 1em;
}