웹 구성 요소를 사용하여 내장 요소를 과급하는 것은 '생각보다 쉽습니다.

이 기사는 웹 구성 요소의 강력한 측면을 탐구합니다 : 내장 HTML 요소를 사용자 정의합니다. 이전에 사용자 정의 요소를 작성했지만이 기술은 기존 요소를 향상시켜 SEO 및 접근성 향상과 같은 이점을 제공합니다. 완전히 독립적 인 요소를 만드는 것과 비슷하지만 주요 차이점이 있습니다.

기사 시리즈 :

• 웹 구성 요소는 생각보다 쉽습니다
• 대화식 웹 구성 요소는 생각보다 쉽습니다
• WordPress에서 웹 구성 요소를 사용하면 생각보다 쉽습니다.
• 웹 구성 요소가있는 과급 내장 요소가 생각보다 쉽게 ​​"IS" (여기에 있습니다)
• 컨텍스트 인식 웹 구성 요소는 생각보다 쉽습니다
• 웹 구성 요소 의사 클래스 및 의사 요소는 생각보다 쉽습니다.

is 속성은 표준 요소를 웹 구성 요소로 변환합니다. 이것은 사용자 정의 기능을 추가하면서 요소의 고유 한 구조와 기능을 활용합니다. 검색 엔진과 스크린 리더는 표준 요소를 쉽게 이해 하여이 접근 방식이 완전히 새로운 사용자 정의 태그를 만드는 것보다 더 액세스하기 쉽습니다.

중요 참고 사항 : Safari 및 일부 덜 일반적인 브라우저는이 내장 요소 사용자 정의가 아니라 완전히 독립적 인 사용자 정의 요소 만 지원합니다. 나중에 폴리 플릴을 해결하겠습니다.

refactor를하자<apocalyptic-warning></apocalyptic-warning> 이전 기사에서 맞춤형 내장 요소로 요소. 핵심 변화는 일반적인 HTMLElement 대신 특정 요소 (예 : HTMLDivElement )를 확장하고 { extends: 'div' } customElements.define() 에 추가하는 것입니다.

 customElements.define (
  "묵시적 경고",
  클래스 apocalypsewarning 확장 htmldivelement {
    생성자 () {
      감독자();
      경고 = document.getElementById ( "warlingtemplate");
      mywarning = 경고.
      this.attachshadow ({모드 : "Open"}). AppendChild (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 사용자는 웹 구성 요소 향상을 볼 수 없습니다.</p> <p> 특정 요소만이 Shadow Dom을 지원합니다. 보안 고려 사항은 이것을 레이아웃 요소와 같은 레이아웃 요소로 제한합니다<code><div> ,,,<code><nav></nav> ,,,<main></main> 등, 텍스트 요소와 같은<h1></h1> 에게<h6></h6> , 그리고 요소. 자율 사용자 정의 요소도 포함됩니다.<p> 웹 구성 요소를 작성하려면 항상 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="조용하지만 명백한 좀비 닌자" data-lb is="light-box">

JavaScript가 간소화되어 Shadow Dom, 템플릿 및 슬롯을 생략합니다.

 customElements.define (
  "라이트 박스",
  클래스 라이트 박스는 htmlimageelement {
    생성자 () {
      감독자();
      LB = Document.CreateElement ( "div");
      lb.style.display = "none";
      lb.style.position = "절대";
      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 = "contonat";
      lb.addeventListener ( "click", () => lb.style.display = "none");
      this.parentNode.insertbefore (lb, this);
      this.addeventListener ( "click", () => lb.style.display = "block");
    }
  },
  {확장 : "IMG"}
);

특히 Safari의 크로스 브라우저 호환성을 보장하기 위해 폴리 필드를 사용합니다. 일반적인 폴리 플릴이 존재하지만보다 표적화 된 접근 방식이 종종 더 효율적입니다. 사파리<lightbox-polyfill></lightbox-polyfill> 폴백으로 요소. (이 폴리 필드의 코드는 간결하게 생략되지만 자율 사용자 정의 요소 내에서 유사한 Lightbox 기능을 작성하는 것이 포함됩니다.) 조건부 로직은 브라우저 지원을 기반으로 사용자 정의 된 내장 요소와 폴리 필드 사이를 전환합니다. 이를 통해 모든 브라우저에서 일관된 기능을 보장합니다. 마지막 단계는이 조건부 논리를 통합하여 필요한 경우에만 폴리 필을 사용하는 것입니다.

이 접근법을 사용하면 시맨틱 HTML을 유지하고 폴리 플릴 사용을 통해 더 넓은 브라우저 호환성을 보장하면서 맞춤형 내장 요소를 생성 할 수 있습니다.