Re: [w3ctag/design-reviews] Declarative CSS Modules and Declarative Shadow DOM `adoptedstylesheets` attribute (Issue #1000)

robglidden left a comment (w3ctag/design-reviews#1000)

Summarizing some of the discussion on this topic I have seen, I would like to emphasize that to me there seems to be a lot of similarities in declaratively sharing a `<style>` element (and/or an `@sheet` in it) into a shadow tree by way of a `<link>` element and by way of an adopted stylesheet.

```html
<style id="shared_styles">
  p {
    color: blue;
  }
</style>
<element-with-link>
  <template shadowrootmode="open">
    <link rel="stylesheet" href="#shared_styles">
    <p>what color am I?</p>
  </template>
</element-with-link>
<my-element-with-adopted-style>
  <template shadowrootmode="open" shadowRootAdoptedStylesheets="shared_styles">
    <p>what color am I?</p>
  </template>
</my-element-with-adopted-style>
```

Both seem to require the same answers to the same enabling decisions:

- specify a resolver algorithm that uniquely identifies which `<style>` element is being referenced (and distinguish between `<style>` elements with duplicate identifiers)
- decide whether the `<style>` element should be shared or cloned (shared seems preferable)
- decide whether the `<style>` element should be only in the light DOM or can also be in a shadow DOM
- decide the exact referencing syntax: for example "#shared_styles" (like the SVG `<use href= "#shared">` analogy) or other syntax like "global:shared_styles" 
- decide whether the `<style id>` attribute can be used to refer to the `<style>` element from the shadow DOM, or whether some other mechanism is needed
- decide how to reference one or more @sheets in the `<style>` element and how to reference only those CSS rules not in an @sheet

Given these same enabling decisions, perhaps enabling both is not significantly different or more complex than enabling only one.

The key differences I see are for the user of the `<link>` element or the `adoptedStyleSheet` attribute:

- The `<link>` element and `adoptedStyleSheet` attribute would have different CSS cascade consequences, with `<link>` being somewhat more flexible.
- The `<link>` element could also be used without a declarative shadow DOM.
- An `adoptedStyleSheet` attribute on a declarative shadow tree `<template>` is not polyfillable because the `<template>` is removed at parse time.

Perhaps there are other significant or compelling differences, though I for one don't see streaming SSR (HTTP Transfer-Encoding: chunked) alone as one of them, but rather as a use case feeding into the decision points for either.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/1000#issuecomment-3090740674
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/1000/3090740674@github.com>

Received on Friday, 18 July 2025 21:19:39 UTC