Web component host reset

Question

Web component host reset

OhiraKyou opened this issue 2 years ago · 4 comments

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 (<></>).

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.

Answer 3 · 2023-12-15T22:54:11.000Z

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

Answer 4 · 2024-09-04T21:57:20.000Z

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;
}

Problem

Solution

Related