Shadow DOMでHTMLのとを使用する方法
HTMLスロット W3Cによって作られた最も注目に値する標準の1つです。それを別の印象的なW3C規格と組み合わせます テンプレート, そして、あなたは一緒に働くための素晴らしい調合を持っています。できる HTML要素を作成および追加する ページへ JavaScriptを使う 必要かつ重要な仕事です.
コードスニペットが必要なときに便利です。 特定の時期にのみ出現する, あるいは、何百もの同じように構造化されたHTML要素をタイプアウトしたくないが、 プロセスを自動化する.
JavaScriptでHTML要素を作成することは あまり望ましくない. それはあなたがすべてのタグをカバーしているかどうかをチェックして再チェックしなければならない面倒なことです。 も 入力して追跡するために多くのこと。この混乱、しかし, 解決策を得た とき タグが登場しました。何かが必要な場合 動的にページに追加された, あなたはそれを中に入れることができます 素子.
この記事では、私はあなたがどのようにあなたが使うことができるかをあなたに示すつもりです。 JavaScriptと一緒にタグ ミニHTMLテーブルファクトリを作成する それは何百もの似たようなテーブルを作成して生成することができます.
の
の tagはHTMLコードを保持します。 ブラウザによってレンダリングされません JavaScriptを使用して、ドキュメントに正しく追加されるまでの 素子.
A シャドウDOM 通常のDOM（HTMLから解析された文書モデル）に似ています。それ スコープツリーを作成します （Shadow DOMツリー） それ自身の根 そしてまた持つことができます 独自のスタイル.
メインドキュメントの要素にShadow DOMツリーを挿入すると、その要素は次のように呼ばれます。 シャドウホスト -, でマークされているシャドウホストのすべての子要素 スロット 属性（前述と同じではありません）
この記事を書いている時点（2017年7月）のShadow DOMは、 WebKitおよびBlinkベースのブラウザでのみサポートされています しかし、あなたはいつでもCanIUseでブラウザサポートの実際の状態をチェックすることができます.
HTMLを設定する
それでも混乱しますか？で始まるコードを見てみましょう。 素子.
内部 テンプレート内, 私も追加しました いくつかの基本的なスタイル テーブルの場合は、 , あります 私たちは 青写真として使う にとって いくつかのテーブルを作成する それは文書に追加されます。がある
そして ） プレースホルダーとして機能する 列タイトルとセル値について。各スロットはユニークな 名 その属性 それを識別する.