<link> tags in Shadow DOM

[thescientist13]

Overview

Currently, Greenwood support style sharing through CSS Module Scripts

import theme from './theme.css' with { type: 'css' };
import sheet from './component.css' with { type: 'css' };

const template = document.createElement('template');

template.innerHTML = `
  <h2>This should be blue and centered (theme.css)</h2>
  <h3>This should be red and centered (component.css)</h3>
`;

export default class SomeComponent extends HTMLElement {
  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

    this.shadowRoot.adoptedStyleSheets = [themeSheet, componentSheet ];
  }
}

customElements.define('some-component', SomeComponent);

These are not baseline in browsers (yet) and Greenwood has to down-level these when opted into through our polyfills configuration option

Instead, could a <link> tag be used (and ultimately bundled) as an alternative? 🤔

const template = document.createElement('template');

template.innerHTML = `
  <link rel="stylesheet" src="../theme.css"/>
  <link rel="stylesheet" src="./component.css"/>
  <h2>This should be blue and centered (theme.css)</h2>
  <h3>This should be red and centered (component.css)</h3>
`;

export default class SomeComponent extends HTMLElement {
  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

    this.shadowRoot.adoptedStyleSheets = [themeSheet, componentSheet ];
  }
}

customElements.define('some-component', SomeComponent);

Thoughts

Would have to test / validate a couple things:

• Does this actually work in the browsers natively?
• Would probably have to use an AST for client side only scripts (e.g. not using declarative shadow DOM) to grab / re-write <link> tags and their paths (which will be hashed / bundled for production)
• What is more performant? (<style> vs { type: 'css' } vs <link>)
• Not sure if this will run into this same potential race condition - TBD

---

Some ongoing threads on this topic in the standards / CG / WG space(s)

• Declarative CSS Module Scripts WICG/webcomponents#939
• [cssom] Can we lift the restriction on constructed flag for adoptedStylesheets? w3c/csswg-drafts#10013