Re: [csswg-drafts] [cssom] Can we lift the restriction on constructed flag for adoptedStylesheets? (#10013)

Some assorted thoughts:

The primary use case cited is for adopting `document.styleSheets`, but this will also enable adopting stylesheets from a parent shadow-root (which is equally useful!)

```js
const parentRoot = el.shadowRoot.host.getRootNode();
el.shadowRoot.adoptedStyleSheets.push(
  ...parentRoot.styleSheets,
  ...parentRoot.adoptedStyleSheets,
);
```

---

I think there is (or should be) a difference between "constructed" stylesheets and "adoptable" stylesheets.

The `@import` restriction could continue to apply to *constructed* stylesheets, but does not need to apply to other adoptable stylesheets.

---

Should there be an easier way to feature detect?

Currently I can see a `try`/`catch` way of polyfilling.

```js
function requiresConstructing() {
  try {
    const doc = document.implementation.createHTMLDocument();
    doc.body.appendChild(doc.createElement("style");
    doc.adoptedStyleSheets = doc.styleSheets;
    return false;
  } catch {
    return true;
  }
}
```

```js
el.shadowRoot.adoptedStyleSheets.push(
  ...constructIfNecessary(document.styleSheets),
  ...document.adoptedStyleSheets,
);

function constructIfNecessary(styleSheets) {
  if (!requiresConstructing()) return styleSheets;

  return Array.from(styleSheets).map(styleSheet => {
    const sheet = new CSSStyleSheet();
    sheet.replace(stringifyStyleSheet(styleSheet));
    return sheet;
  });
}
```

(using `stringifyStyleSheet` helper from #7171)

---

Should there be a way to adopt stylesheets not just once, but "forever"?

If I understand correctly, `adoptedStyleSheets.push(...document.styleSheets)` is taking a snapshot of `document.styleSheets` at the time it's called. `styleSheets` could change in the future, and it's probably desirable to propagate those changes into wherever they are adopted.


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


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

Received on Sunday, 17 March 2024 01:50:43 UTC