Re: [w3ctag/design-reviews] Question: should `shadowrootadoptedstylesheets` perform a fetch? (Issue #1195)

frederikbosch left a comment (w3ctag/design-reviews#1195)

In one of the threads on this topic - I cannot find where anymore - I have suggested to use an `host-for` attribute on the host element of the Shadow DOM.

```html
<style type="module" specifier="fw-avatar">img { border-radius: 100%; }</style>
<fw-avatar host-for="fw-avatar">
  <template shadowrootmode="open">
    <img src="" alt="">
  </template>
</fw-avatar>

<style type="module" specifier="my-avatar">img { border-radius: 100%; }</style>
<div host-for="my-avatar">
  <template shadowrootmode="open">
    <img src="" alt="">
  </template>
</fw-avatar>
```

Why would that help with a solution on the `fetch` problem?

1) You have the same advantage as `shadowrootadoptedstylesheets` over `<link>`: no need to map `<link>` elements to the `adoptedStyleSheets` property.
2) It's an attribute, and not an element, so no (additional) DOM soup with many declarative shadow roots.
3) You do not need a new `<link>` type.
4) You have an element to trigger error handling on when a `fetch` would result in an error
5) The `host-for` attribute could disappear, just as the `shadowrootadoptedstylesheets` attribute. Another option would be to make `Element.hostFor` a readonly property, and changing the attribute could then trigger a `DOMException`or warning.

Moreover, there are additional reasons why an attribute on the host is beneficial compared to one at the shadow root.

6) Dynamic and static contexts could use the same concepts.
When you would create an element dynamically, you would be able to directly define the stylesheets that need to be applicable to the host element.

```js
document.createElement('fw-avatar', {
    hostFor: 'my-specifier'
});

document.createElement('div', {
    hostFor: 'my-specifier'
});
```

which would overwrite the value of the new static property for custom elements

```js
class FwAvatar extends HTMLElement {
  static hostFor = 'fw-avatar';
}
```

And then, after `fetch`, the resulting `CSSStyleSheet` would be added to the shadow's `.adoptedStyleSheets`.

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

Message ID: <w3ctag/design-reviews/issues/1195/4361332377@github.com>