Re: [csswg-drafts] [selectors] Add selector match custom element (#10407)

**Another real-world use case: CSS resets / framework preflights overriding custom element styles**

A concrete example of why this selector is needed comes from CSS resets like Tailwind CSS's preflight. Tailwind v4 ships a preflight that includes a universal rule:

```css
*, ::after, ::before, ::backdrop, ::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}
```

This rule unintentionally overrides `:host` styles defined inside Web Components' Shadow DOM, because the custom element's host node still belongs to the document's style scope. Even though `:host` has higher specificity *within* the shadow tree, the document-level `*` selector wins for properties applied to the host element from outside.

See the related Tailwind discussion: https://github.com/tailwindlabs/tailwindcss/discussions/18628

The workaround today is either `!important` inside the component, or manually excluding elements from the reset — both of which are fragile and require component authors or framework users to know about this interaction ahead of time.

With a `:custom-element` pseudo-class (or equivalent), framework authors could write:

```css
*:not(:custom-element) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}
```

This would make resets and preflights respect the boundary of custom elements by default, without requiring any special knowledge from component authors.


-- 
GitHub Notification of comment by mantou132
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10407#issuecomment-4418616596 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 11 May 2026 07:57:27 UTC