Webコンポーネントのスタイリングオプションを検討します

Webコンポーネントのスタイルをどこに入れますか？

ここでシャドウドムを使用していると思います。私にとって、それはWebコンポーネントの大きな描画の1つです。プラットフォームは、プラットフォームだけができる独特の強力なことです。したがって、これは、Webコンポーネントのスタイルを漏れない方法で定義することであり、グローバルなスタイルをリークする方法ではありません（これも非常に興味深いものであり、記事の後半で見ることができるカスタムプロパティを介して実行できます）。

JavaScript内にテンプレートを構築している場合は、テンプレートリテラルとデータをテンプレートにうまくスプリンクする方法のために優れています。JavaScriptのスタイルにアクセスする必要があります。

 constテンプレート= `
  <style> $ {styles} </style>
  <div>
    <h2 id="title"> $ {title} </h2>
    $ {content}
  </div>
`;

そのスタイル変数はどこから来ていますか？たぶん、テンプレートのリテラルですか？

 const style = `
  ：ホスト {
    背景：白。
  }
  H2 {
    フォント：900 1.5REM/1.1 -System-UI、sans-serif;
  }
`;

それは問題ないと思いますが、このWebコンポーネントを構築しようとしているクラスのどこかに、コードの大きな厄介なブロックになります。

別の方法は、テンプレートを し、

 
  <style>
    ：ホスト {
      背景：白。
    }
    H2 {
      フォント：900 1.5REM/1.1 -System-UI、sans-serif;
    }
  </style>

  <div>
    <h2> </h2>
    <p> </p>
  </div>
テンプレート>

HTMLをHTMLに保持しているため、これで魅力を見ることができます。私がそれについて気に入らないのは、あなたがマニュアルShadowroot.queryselector（ "＃title-hook"）をたくさんしなければならないということです。そのテンプレートを具体化するために作業します。それは便利なテンプレートのようには感じません。また、HTMLのどこかにこのテンプレートをチャックする必要があることも気にしません。どこ？私は知らないよ。そこにチャックしてください。それをチャックします。

CSSもJavaScriptから移動しますが、ある厄介な場所から別の場所に移動しました。

CSSをCSSファイルに保持したい場合は、次のように並べ替えることができます。

 
  <style>
    @import "/css/components/card.css";
  </style>

  <div>
    <h2> </h2>
    <p> </p>
  </div>
テンプレート>

（

これで、@Importが追加のHTTPリクエストであり、パフォーマンスヒットであることで有名です。スティーブン・ランバートの記事によると、それは0.5秒遅い時に記録されたと言います。理想的ではありません。代わりにこれを行う方がはるかに良いとは思わない：

クラスmyComponentはhtmlelementを拡張します{
    
  constructor（）{
    素晴らしい（）;
    this.attachshadow（{mode： "open"}）;

    fetch（ '/css/components/card.css'）
      .then（response => respons.text（））
      .then（data => {
        let node = document.createelement（ 'style'）;
        node.innerhtml = data;
        document.body.appendChild（node）;
      }）;
  }

  // ...
}

それは潜在的に不定期のWEBコンポーネントになる可能性がありますか？お尻を降りてテストする必要があると思います。

これを再び掘り下げたので、:: Partが蒸気を得たようです（説明者）。だから私にできる…

 constテンプレート= `
  <div part="card">
    <h2 id="title"> $ {title} </h2>
    $ {content}
  </div>
`;

…次に、次のようなシャドウドムにのみ適用されるグローバルスタイルシートにスタイルを書きます。

私のカード::パート（カード）{
  背景：黒;
  色：白;
}

…ブラウザのサポートのスミッジがありますが、多分十分ではありませんか？

これらの「部分」セレクターは、接続されている正確な要素のみに触れることができます。すべてのDOMノードに部品名を適用し、それぞれ完全にスタイリングすることにより、すべてのスタイリングを行う必要があります。特に、シャドウドムの魅力は、私たちがよりゆるいCSSセレクターを書くことができ、H2 {}スタイルがあちこちに漏れることを心配しないであろうこの孤立したスタイリング環境であるため、それは楽しいことではありません。

ネイティブCSSモジュールが物になると、それが起こる可能性のある最も役立つことのように見えます。

 './styles.css'からスタイルをインポートします。

クラスMyElementはhtmlelementを拡張します{
  constructor（）{
    this.attachshadow（{mode：open}）;
    this.shadowroot.AdoptedStylesheets = [Styles];
  }
}

しかし、これが何らかのパフォーマンスが向上するかどうかはわかりません。これと@importの間の洗浄のようです。ネイティブCSSモジュールを使用した明確さと構文を好むと言わざるを得ません。 JavaScriptを使用するときにJavaScriptを書くのはいいことです。

構成可能なスタイルシートは、複数のコンポーネントでスタイルシートを共有するのにも役立ちます。しかし、CSSモジュールのアプローチは、その時点でStyleSheetがすでに変数になっているため、それもそうする可能性があるように見えます。

以上がWebコンポーネントのスタイリングオプションを検討しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。