ファイルをWebコンポーネントに読み込みます

ロードファイルのWebコンポーネント

✔️ 外部テキストファイル読み込み.txt , .svg , .html
✔️ コンテンツをDOMに注入する

陰で

ShadowdomのLightdomコンテンツを尊重する<slot> 元素

オプションのスコープ付きCSSスタイルで!✨✨✨

Lightdomコンテンツをshadowdomに移動できます

または<load-file> 要素自体replaceWith 属性

✔️ ' HTMLインポート'の代替品ではありません<script> 実行されません

✔️ は8行のコードで行われます:

ページに外部SVGファイルを置く方法は複数あります
ソースhttps://vecta.io/blog/best-way-to-embed-svg

👉 srcとして:<img src="file.svg">

SVGコンテンツはCSSでスタイルを指定できません

👉 オブジェクトとして:<object type = "image/svg+xml" data="file.svg"></object>
👉 背景画像background-image: url(file.svg)

(2019年)Inline SVG in CSS background with custom properties

(2015年)CSS-Tricks: Using SVG background-image

👉 🎉 使用する<load-file> Webコンポーネント🎉

これは、スコープのCSSスタイリングを提供する

SVGを読み込む

   <load-file replaceWith src="//load-file.github.io/heart.svg"></load-file>

   <load-file src="//load-file.github.io/heart.svg">
    <style>
        path:nth-child(2n+2) {
        fill: GREEN; /* shadowDOM style does NOT style global DOM */
        }
    </style>
   </load-file>

裸のSVGとして、replaceWith 属性

(グローバル) CSSスタイルのすべてのSVGS (赤いハートのパズルを参照)

または、影に含まれるディスプレイ

現在(ローカル)CSSスタイルの1つのSVG

<ロードファイル> Webコンポーネントの読み込み
要素をREPOから読み込む

<script src="https://load-file.github.io/element.js"></script>

カスタム要素が定義されるとき、それは重要でありません.
既存の<load-file> カスタム要素が後で定義されると、ドキュメント内の要素が自動的にアップグレードされます.
または<文書>タグを使ってHTML文書の< Head >の要素全体を定義します.

<script>
customElements.define("load-file",class extends HTMLElement{async connectedCallback(){
this.shadowRoot||this.attachShadow({mode:"open"});this.shadowRoot.innerHTML=await(
await fetch(this.getAttribute("src"))).text();this.shadowRoot.append(...this.children);
this.hasAttribute("replaceWith")&&this.replaceWith(...this.shadowRoot.children)}})
</script>

<ロードファイル> Webコンポーネントの使用
完全パスを指定するsrc 属性
追加するreplaceWith 属性がsrc内容に代わる<load-file> 文書内の要素そのもの

<load-file  replaceWith  src="https://load-file.github.io/heart.svg"></load-file>

!年の資本に注意するreplaceWithなしでreplaceWith ソース内容はShadowdomで注入されます:

<load-file src="https://load-file.github.io/heart.svg"></load-file>

属性を持つすべての要素shadowRoot に移動します.

<load-file src="https://load-file.github.io/heart.svg">
    <style shadowRoot>
        path:nth-child(2n+2) {
        fill: GREEN; /* shadowDOM style will NOT style global DOM */
        }
    </style>
</load-file>