review(#2873): use a plain <style> element instead of adoptedStyleSheets
mara: 'i dont like js css attacher. is there a cleaner way?' — yes: each component instance was already building its own fresh CSSStyleSheet() per connect, no sharing across instances, so adoptedStyleSheets bought nothing here over a plain <style> tag. Same raw-text CSS import, just a simpler attach step.
This commit is contained in:
parent
edf1c5a17f
commit
1f86354617
1 changed files with 15 additions and 9 deletions
|
|
@ -1,15 +1,21 @@
|
||||||
// attachShadowCss(host, cssText, shadowInit) — attach an open shadow root
|
// attachShadowCss(host, cssText, shadowInit) — attach an open shadow root
|
||||||
// to `host`, adopt `cssText` as a constructed stylesheet, and return the
|
// to `host`, append `cssText` as a plain `<style>` element, and return the
|
||||||
// root. Shared by every shadow-DOM custom element (hive-dialog, hive-toast,
|
// root. Shared by every shadow-DOM custom element (hive-dialog, hive-toast,
|
||||||
// hive-btn) so the CSSStyleSheet-adoption boilerplate lives in one place
|
// hive-btn) so the boilerplate lives in one place instead of being
|
||||||
// instead of being copy-pasted per component. `shadowInit` extends the
|
// copy-pasted per component.
|
||||||
// `attachShadow()` options past `mode: 'open'` — e.g. `hive-btn` passes
|
//
|
||||||
// `{ delegatesFocus: true }` so `.focus()` on the host reaches the inner
|
// A `<style>` element rather than a constructed `CSSStyleSheet` +
|
||||||
// `<button>`.
|
// `adoptedStyleSheets` — mara's call on review, and the right one: each
|
||||||
|
// component instance was already building its own fresh `CSSStyleSheet()`
|
||||||
|
// per connect (no sharing across instances), so `adoptedStyleSheets` bought
|
||||||
|
// nothing here over the plain, universally-understood `<style>` tag. Reach
|
||||||
|
// for `adoptedStyleSheets` again only if a future component actually shares
|
||||||
|
// one parsed stylesheet object across many instances — that's the case it
|
||||||
|
// exists for.
|
||||||
export function attachShadowCss(host, cssText, shadowInit = {}) {
|
export function attachShadowCss(host, cssText, shadowInit = {}) {
|
||||||
const root = host.attachShadow({ mode: 'open', ...shadowInit });
|
const root = host.attachShadow({ mode: 'open', ...shadowInit });
|
||||||
const sheet = new CSSStyleSheet();
|
const style = document.createElement('style');
|
||||||
sheet.replaceSync(cssText);
|
style.textContent = cssText;
|
||||||
root.adoptedStyleSheets = [sheet];
|
root.append(style);
|
||||||
return root;
|
return root;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue