Re: [csswg-drafts] Proposal: CSS @sheet (#11509)

+1 to @noamr's synthesis overall, and good point that URL fragments in HTML pages naturally point to elements in the outermost light DOM.

If I'm understanding [the needs of server-side rendering](https://github.com/WICG/webcomponents/issues/939#issuecomment-2599352642) correctly, we're _also_ going to need some way to refer to elements inside shadow DOM, as the natural structure for SSR will sometimes look like

```html
<!-- Use a component that uses a shared component -->
<template shadowrootmode="open">
  <!-- Here comes a component whose style might need to be shared later. -->
  <style id="shared-component-style-outside">@sheet actual-content {...}</style>
  <template shadowrootmode="open">
    <style id="shared-component-style-inside">...</style>
    <!-- Shared component shadow DOM -->
  </template>
</template>
<!-- Here comes another copy of the component that needs shared style. -->
<!-- DON'T re-emit the style -->
<template shadowrootmode="open">
  <!-- Doesn't find the style because it's in 2 layers of shadow DOM -->
  <link rel=stylesheet href="#shared-component-style-inside">
  <!-- Still doesn't find the style because it's in 1 layer of shadow DOM -->
  <link rel=stylesheet href="#shared-component-style-outside" sheet=actual-content>
  <!-- Shared component shadow DOM -->
</template>
```

This is _not_ a CSS problem to solve: HTML as a whole needs a way to explicitly name IDs inside shadow DOM. It's related to https://github.com/WICG/webcomponents/issues/66#issuecomment-171452596 and https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md.

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


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

Received on Tuesday, 11 February 2025 18:46:03 UTC