web-dev-qa-db-ja.com

シャドウDOMでグローバルCSSスタイルを使用する方法

シャドウdomはcssスタイルをカプセル化し、セレクターはシャドウの境界を越えません。

質問：シャドウDOMでグローバル共通CSSスタイルを使用する方法は？
（すべてのページで使用される一般的なcssスタイルがいくつかあると仮定します（例：font-family、h1、h2、clear、reset ...）、Shadow domで機能させる方法は？）

javascriptweb-componentshadow-dom
12
Jiubao

いくつかの解決策：

上記の記事の1つもAmidによって指摘されたことに注意してください。記事が書かれた時点では、ChromeにはCSS変数がありませんでしたが、最近リリースされたGoogle Chrome 49でネイティブに動作します。

4
MarcG

提供されたリンクのどれもChrome 66（2018年現在）では機能しないので、外部からカスタム要素をカスタマイズするためにこれに行き着きました：

<custom-element tabindex=10>
  <style>
    :Host div {
      --color: red;
    }
  </style>
</custom-element>

class Element extends HTMLElement {
    constructor() {
        super();
        var shadow = this.attachShadow({mode: 'open'});

        var user_style = shadow.Host.innerHTML.match(/<style>([\s\S]*?)<\/style>/);
        var style = document.createElement('style');
        style.innerHTML = `
            :Host div {
                color: var(--color, #aaa);
             }
        ` + user_style ? user_style[1] : '';    

        shadow.appendChild(style);
        shadow.Host.querySelector('style').remove();
    }
}

customElements.define(
  "custom-element",
  Element
)
2
jcubic

私は元の問題と同じ問題に苦労しました。つまり、たとえば<h3>要素のグローバルルールをonce定義し、任意の/多くのShadowDOMs内でその恩恵を受けます。

いいえ、css-variablesはこのことには適していませんたとえば、fontとcolor変数を<h3>に一度定義したとしても、それぞれを調べる必要があるためです。そして、すべてのシャドウスタイルシートとそれらを消費するCSSルールを追加します。

これを書いている時点で（はい、私たちは今2019年です）最短の標準化されたソリューションは確かにいくつかのグローバルな共通CSSをインポートしています。 Chrome、Firefox、Anaheim（Edge on Chromium）で完全に機能します。

それでも、すべてのコンポーネントに@importルールを追加する必要があるため、コストがかかります（コーディング/メンテナンスPOVから、スタイルシートは1回だけフェッチされます）が、これが現在支払うことができる最低価格です。

2
GullerYA