Webコンポーネントを備えた組み込みの要素をスーパーチャージする」は、あなたが思っているよりも簡単です

この記事では、組み込みのHTML要素のカスタマイズのWebコンポーネントの強力な側面について説明します。以前にカスタム要素の作成をカバーしていましたが、この手法は既存の要素を強化し、SEOの改善やアクセシビリティなどの利点を提供します。完全に独立した要素を作成することに似ていますが、重要な違いがあります。

記事シリーズ：

• Webコンポーネントは、あなたが思っているよりも簡単です
• インタラクティブなWebコンポーネントは、あなたが思っているよりも簡単です
• WordPressでWebコンポーネントを使用することは、あなたが思っているよりも簡単です
• Webコンポーネントを備えた組み込みの要素を「あなたが思っている」よりも簡単になりました（あなたはここにいます）
• コンテキスト認識Webコンポーネントは、あなたが思っているよりも簡単です
• Webコンポーネントの擬似クラスと擬似要素は、あなたが思っているよりも簡単です

is属性は、標準要素をWebコンポーネントに変換します。これは、カスタム機能を追加しながら、要素の固有の構造と機能を活用します。検索エンジンとスクリーンリーダーは、標準要素を容易に理解し、まったく新しいカスタムタグを作成するよりもアクセスしやすくします。

重要な注意： Safariおよび一部の一般的なブラウザーは、この組み込みの要素のカスタマイズではなく、完全に独立したカスタム要素のみをサポートしています。後でポリフィルに対処します。

リファクタリングしましょう<apocalyptic-warning></apocalyptic-warning>カスタマイズされた組み込み要素としての以前の記事の要素。コアの変更には、一般的なHTMLElement代わりに特定の要素（ HTMLDivElementなど）を拡張し、 { extends: 'div' } customElements.define()に追加することが含まれます。

 customelements.define（
  「黙示録的な説明」、
  クラスの黙示録はhtmldivelementを拡張します{
    constructor（）{
      素晴らしい（）;
      let warning = document.getElementById（ "WarningTemplate"）;
      mywarning = warning.content;
      this.attachshadow（{mode： "open"}）。appentchild（mywarning.cloneNode（true））;
    }
  }、
  {拡張： "div"}
）;

HTMLはから変更されます<apocalyptic-warning></apocalyptic-warning>に<div is="apocalyptic-warning">。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div is=&quot;apocalyptic-warning&quot;&gt; アンデッド &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>覚えておいてください：SafariユーザーはWebコンポーネントの機能強化が表示されません。</p> <p>特定の要素のみがシャドウdomをサポートしています。セキュリティ上の考慮事項は、これを次のようなレイアウト要素に制限します<code><div>、<code><nav></nav> 、<main></main>など、テキスト要素のようなもの<h1></h1>に<h6></h6>、そして要素。自律的なカスタム要素も含まれています。<p> Webコンポーネントを作成すると、常にShadow Domが必要ではありません。これを説明するために、内蔵のライトボックスを使用して画像を作成しましょう。より大きな画像に<code>is属性とデータ属性（ data-lbsrc ）を使用します。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174243979698755.jpg" class="lazy" alt="Webコンポーネントを備えた組み込みの要素をスーパーチャージする」は、あなたが思っているよりも簡単です" data-lb is="light-box">

JavaScriptは合理化されており、シャドウDOM、テンプレート、スロットを省略しています。

 customelements.define（
  「ライトボックス」、
  クラスのライトボックスはhtmlimageElementを拡張します{
    constructor（）{
      素晴らしい（）;
      let lb = document.createelement（ "div"）;
      lb.style.display = "none";
      lb.style.position = "absolute";
      lb.style.height = "100VH";
      lb.style.width = "100VW";
      lb.style.top = 0;
      lb.style.left = 0;
      lb.style.background = `rgba（0,0,0、0.7）url（$ {this.dataset.lbsrc}）no-repeat center`;
      lb.style.backgroundsize = "clont";
      lb.addeventlistener（ "click"、（）=> lb.style.display = "none"）;
      this.parentnode.insertbefore（lb、this）;
      this.addeventlistener（ "click"、（）=> lb.style.display = "block"）;
    }
  }、
  {拡張： "img"}
）;

特にSafariの場合、クロスブラウザーの互換性を確保するために、ポリフィルを使用します。一般的なポリフィルは存在しますが、よりターゲットを絞ったアプローチがより効率的になることがよくあります。 Safariは自律的なカスタム要素をサポートしているため、自律を作成できます<lightbox-polyfill></lightbox-polyfill>フォールバックとしての要素。 （このポリフィルのコードは簡潔にするために省略されていますが、自律カスタム要素内で同様のライトボックス機能を作成することが含まれます。）条件付きロジックは、ブラウザーサポートに基づいてカスタマイズされた組み込み要素とポリフィルを切り替えます。これにより、すべてのブラウザで一貫した機能が保証されます。最後のステップは、必要に応じてポリフィルを使用するようにこの条件付きロジックを組み込むことです。

このアプローチにより、セマンティックHTMLを維持し、ポリフィルを使用してより広いブラウザの互換性を確保しながら、カスタマイズされた組み込み要素を作成できます。