dom_dom0700_009

adoptedStyleSheets（Constructable Stylesheets）を Shadow DOM で適用するコードとして正しいのはどれか。

  1. document.styleSheets.push(‘p{color:red}’)
  2. const s=new CSSStyleSheet(); s.replaceSync(‘p{color:red}’); shadow.adoptedStyleSheets=[s];
  3. <style is=”adopted”>p{color:red}</style> を置く
  4. shadow.querySelector(‘head’).append(‘p{color:red}’)
正解
  1. const s=new CSSStyleSheet(); s.replaceSync(‘p{color:red}’); shadow.adoptedStyleSheets=[s];
解説

Constructable Stylesheets は new CSSStyleSheet() で作成し、replace/replaceSync で内容を設定後、shadow.adoptedStyleSheets に配列で代入する。ブラウザ対応は要確認だが、Shadow DOM と相性が良い。

使用例（サンプルコード）

[ html ]

<div id="host"></div>
<script>
  const host = document.getElementById('host');
  const shadow = host.attachShadow({mode:'open'});

  const sheet = new CSSStyleSheet();
  sheet.replaceSync('p{font-weight:bold}');
  shadow.adoptedStyleSheets = [sheet];

  const p = document.createElement('p');
  p.textContent = 'Styled by adoptedStyleSheets';
  shadow.appendChild(p);
</script>