〈load-file〉웹 컴포넌트

✔️ 외부 텍스트 파일 .txt, .svg, .html 로드

✔️ 콘텐츠를 DOM에 주입

ShadowDOM에서

shadowDOM<slot> 요소에 대한 lightDOM 콘텐츠를 존중합니다

.

선택적 범위 CSS 스타일 지정! ✨✨✨

lightDOM 콘텐츠를 shadowDOM으로 이동할 수 있습니다.

또는 <load-file> 요소 자체를 replaceWith 속성

으로 바꿉니다.

✔️는 'HTML 가져오기'를 대체하지 않습니다. <스크립트>가 실행되지 않습니다.

✔️는 8줄의 코드로 수행됩니다.

페이지에 외부 SVG 파일을 넣는 방법에는 여러 가지가 있습니다.

출처: https://vecta.io/blog/best-way-to-embed-svg

👉 src로 : <img src="file.svg">

SVG 콘텐츠는 CSS로 스타일을 지정할 수 없습니다.

👉 객체로 : <객체 유형 = "image/svg+xml" data="file.svg"></object>

👉 CSS 배경 이미지 배경 이미지: url(file.svg)

(2019) Inline SVG in CSS background with custom properties

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

👉 🎉 <load-file> 웹 컴포넌트 사용 🎉

범위가 지정된 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>

replaceWith 속성을 사용하여 베어 SVG로 표시

(글로벌) CSS는 모든 SVG의 스타일을 지정합니다(빨간색 하트 퍼즐 조각 참조).

또는 shadowDOM에 포함된 표시

지금(로컬) CSS 스타일 하나의 SVG(녹색 하트 퍼즐 조각 참조)

<load-file> 웹 컴포넌트 로드

Repo에서 요소 로드

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

사용자 정의 요소가 정의되는 시기는 중요하지 않습니다.

문서의 기존<load-file> 요소는 사용자 정의 요소가 나중에 정의될 때 자동으로 업그레이드됩니다.

또는 <script> 태그를 사용하여 HTML 문서의 에 있는 전체 요소를 정의합니다.

<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>

<load-file> 웹 구성 요소 사용

src 속성에 전체 경로를 지정하십시오.

src 내용이 문서의 replaceWith 요소 자체를 대체하도록 <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이 있는 모든 요소는 shadowDOM으로 이동됩니다.

<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>