Web Components: 単独のCSSファイルを Shadow DOM で利用する

1. このページの目的

Web Components において、単独のCSSファイルを Shadow DOM で利用してみる。

2. デモ

@import を使えばよい。

index.html (抜粋)

<my-app></my-app>
<p>これは Shadow DOM の外にあるメッセージです。Shadow DOM 内に記述したCSSの影響を受けず、黒色のま
まのはずです。</p>

<script type="module">
  import MyApp from './my-app.js';
  window.customElements.define('my-app', MyApp);
</script>

my-app.js

export default class extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
<style>
  @import './my-app.css';
</style>
<p name="message">これは、Shadow DOM の中にあるメッセージです。Scoped CSS によって、赤色になっているはずで
す。</p>
`;
  }
}

my-app.css

:host {
  display: block;
  contain: content;
}
p {
  color: red;
}

実行結果

これは Shadow DOM の外にあるメッセージです。Shadow DOM 内に記述したCSSの影響を受けず、黒色のままのはずです。

3. メモ

4. 参考