ShadowDOM 네트워크 구성 요소 소개

WebComponents는 구성 요소 기반의 웹 개발을 구할 수 있습니다.
모든 프론트 프레임워크가 구성 요소 방법과 구성 요소식 사고를 추진하는 상황에서 DOM은 이 문제를 해결하는 원본 방법을 가지고 있다.WebComponents는 브라우저에서 기본 방식으로 구성 요소를 포함하는 단체 솔루션입니다.이 솔루션은 다음과 같습니다.

CustomElements

ShadowDOM

HTML Template

HTML 가져오기(비활성화)

WebComponents를 시작하고 실행하려면 CustomElements V1 polyfill이 필요합니다. 구성 요소와 생명주기 방법을 만드는 일반적인 방법을 제공합니다. 다음 저장소에서 얻을 수 있습니다.

네트워크 구성 요소 / 다각형 채우기

웹 어셈블리 다각형 채우기

많은 사람들이 사용자 정의 요소를 만들기 위해 shadowDOM, 템플릿 태그, HTML 가져오기가 필요하다고 말할 것이다.그들은 옳지만, 결코 완전히 정확하지는 않다.구성 요소가 없는 상태에서 구성 요소를 만들 수도 있습니다.

사용자 정의 요소

CustomElements는 본 컴퓨터의 HTML 요소와 유사한 요소입니다. 예를 들어 div, span 등입니다. 이것은 HTMLElement 구조 함수와 다른 유사한 구조 함수의 확장입니다. 생성할 CustomElement의 유형을 기반으로 합니다.
예를 하나 봅시다.웹 구성 요소를 만들려고 한다면, 이 구성 요소는 figure 과 img 함께 빠르게 만들 것입니다.일반적으로 HTML은 다음과 같습니다.

<figure>
  <img
     src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
     alt="An awesome picture">
  <figcaption>MDN Logo</figcaption>
</figure>

샘플 추출 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
구성 요소는 다음과 같이 보입니다.

<img-figure
  caption="MDN Logo"
  alt="An awesome picture"
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
></img-figure>

기본 부품 코드는 다음과 같습니다.

class ImgFigure extends HTMLElement {
  connectedCallback() {
    this.src = this.getAttribute("src") || null;
    this.caption = this.getAttribute("caption") || "";
    this.alt = this.getAttribute("alt") || null;
    this.render();
  }

  render() {
    this.innerHTML = this.template({
      src: this.src,
      alt: this.alt,
      caption: this.caption
    });
  }

  template(state) { 
    return `
    <figure>
      <img
        src="${state.src}"
        alt="${state.alt || state.caption}">
      <figcaption>${state.caption}</figcaption>
    </figure>
    `;
  }
}

customElements.define('img-figure', ImgFigure);

JavaScript를 통한 사용법은 다음과 같습니다.

// create element
const i = document.createElement('img-figure');

//set the required attributes
i.setAttribute('src', '//res.cloudinary.com/time2hack/image/upload/goodbye-xmlhttprequest-ajax-with-fetch-api-demo.png');
i.setAttribute('caption', 'GoodBye XMLHttpRequest; AJAX with fetch API (with Demo)');
i.setAttribute('alt', 'GoodBye XMLHttpRequest');

//attach to the DOM
document.body.insertBefore(i, document.body.firstElementChild);

또는 다음과 같이 DOM에서 요소를 생성합니다.

<img-figure 
  style="max-width: 400px"
  src="//res.cloudinary.com/time2hack/image/upload/ways-to-host-single-page-application-spa-static-site-for-free.png"
  alt="Free Static Hosting"
  caption="Ways to host single page application (SPA) and Static Site for FREE">
</img-figure>

프레젠테이션:

구성 요소 생성을 자세히 살펴보겠습니다.

초기 필수 부품

모든 사용자 정의 요소/구성 요소는 기본 HTMLElement 객체를 확장하고 속성, 스타일 등의 특성을 가집니다.

class ImgFigure extends HTMLElement {
  connectedCallback() {
    // ....
  }
}

figcaption 은 DOM에 연결할 때 수행됩니다.그래서 우리는 초기 코드를 이 함수에 넣었다.

최종 필요 부품

마지막으로, DOM에 요소를 등록해야 합니다. 그러면 DOM이 이 요소를 볼 때 이 클래스가 아니라 이 클래스를 실례화합니다connectedCallback.

customElements.define('img-figure', ImgFigure);

이렇게이러한 부품은 어셈블리를 등록하고 HTMLElement API를 통해 생성할 수 있습니다.

네트워크 구성 요소 재생(다른 프레젠테이션):

But what if you wanna use the make it react to any attribute change?

이를 위해, 구성 요소의 클래스에는 두 단락의 코드가 있어야 한다.
첫째: 관찰 가능한 속성을 등록해야 합니다.

static get observedAttributes() {
  return ['attr1', 'attr2'];
}

둘째: 관찰 가능한 속성의 변화에 반응해야 한다.

attributeChangedCallback(attr, oldValue, newValue) {
  if(oldValue === newValue){
    return;
  }
  if (attr == 'attr1') {
    // some stuff
  }
  if (attr == 'attr2') {
    // some other stuff
  }
}

이전 구성 요소 document.createElement 의 이 두 단락 코드를 살펴보겠습니다.

class ImgFigure extends HTMLElement {
  connectedCallback() {
    this.src = this.getAttribute('src') || null;
    this.caption = this.getAttribute('caption') || '';
    this.alt = this.getAttribute('alt') || null;
    this.render();
  }
  static get observedAttributes() {
    return ['src'];
  }

  attributeChangedCallback(attr, oldValue, newValue) {
    if(oldValue === newValue){
      return;
    }
    if (attr === 'src') {
      this.querySelector('img').src = newValue;
    }
  }
  render() {
    this.innerHTML = template({
      src: this.src,
      alt: this.alt,
      caption: this.caption,
    });
  }
}

이러한 방식으로 브라우저의 대부분 지원을 걱정하지 않고 사용자 정의 요소를 만들 수 있습니다.img-frame 라이프 사이클 방법은 다음과 같습니다.
방법
용법/설명
구조 함수()
요소를 만들거나 업그레이드할 때 호출
connectedCallback()
요소를 문서에 삽입할 때 (섀도우 트리 포함) 호출
disconnectedCallback()
문서에서 요소를 삭제할 때 호출
attributeChangedCallback(속성 이름, 이전 값, 새 값, 이름 공간)
요소에서 속성을 변경, 추가, 삭제 또는 바꿀 때 호출(관찰된 속성에만 호출)
adoptedCallback(기존 문서, 새 문서)
새 문서에서 요소를 사용할 때 호출

지원

Can I Use custom-elementsv1?caniuse의 주요 브라우저에서custom-elementsv1 기능을 지원하는 데이터입니다.일반 도메인 이름 형식입니다.
근데 잠깐만!Firefox 지원customElement:

Summary:

This is basically an after the fact notification that we're in progress of implementing Custom Elements (both autonomous custom elements and customized built-in elements) and the implementation for old spec, which was never exposed to the web, will be removed. We are close to finishing the implementation, but there are still some performance works before shipping the feature. We plan to enable it only on Nightly first to get more feedback from users. (there will be an intent-to-ship before shipping the feature)

https://groups.google.com/forum/#!msg/mozilla.dev.platform/BI3I0U7TDw0/6-W39tXpBAAJ

CustomElements 자세히 보기: https://developers.google.com/web/fundamentals/web-components/customelements

But What about ShadowDOM?

그림자 영역

ShadowDOM은 기본 DOM과 CSS를 웹 구성 요소에 봉인하는 방법입니다.그래서 만약 당신이 정말로 봉인이 필요하다면,제3자에게 작은 부품을 제공하는 경우;그림자를 사용합니다.
먼저customElements를 사용하여 ShadowDOM을 추가한 다음 다음 작업을 수행할 수 있습니다.

element.attachShadow({mode: 'open'});

그림자의 예를 살펴보겠습니다.attachShadow 방법은 봉인된 구성 대상만 표시해야 한다.객체에는 값attachShadow 또는 mode이 있는 키open가 있습니다.
설명 https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow:closed: 그림자 DOM 트리의 봉인 모드에 대한 문자열을 지정합니다.무엇 중의 하나:

element.shadowRoot === shadowroot; // returns true

mode: 폐쇄 봉인 모드를 지정합니다.이 모드는 외부 세계에서 닫힌 그림자 루트의 노드에 접근하는 것을 거부합니다

element.shadowRoot === shadowroot; // returns false
element.shadowRoot === null; // returns true

closed로 돌아가면 일반 문서로 사용하고 작업을 수행할 수 있습니다.

지원

Can I Use shadowdomv1?caniuse의 주요 브라우저는 shadowdomv1 기능의 데이터를 지원합니다.일반 도메인 이름 형식입니다.
추가/자세히 보기 ShadowDOM: https://developers.google.com/web/fundamentals/web-components/shadowdom

HTML 템플릿

HTML 템플릿은 페이지에 태그를 보내지만 표시되지 않는 메커니즘을 제공합니다.자바스크립트 패키지 크기를 최소화하려면 큰 도움이 됩니다.
템플릿이 문서에 나타나면 해당 템플릿을 복제한 다음 관련 동적 내용을 JavaScript로 채울 수 있습니다.
그것의 지지는 아직 광범위하지 않다.따라서 다음 코드를 사용하여 검사할 수 있습니다

if ('content' in document.createElement('template')) {
  // operate on the template
}

사용된 브라우저가 템플릿 탭을 지원하는 것을 고려합니다.다음과 같이 사용할 수 있습니다.

<template id="img-figure">
  <figure>
    <img />
    <figcaption></figcaption>
  </figure>
</template>

let template = () => `Template tag not supported`;
const t = document.querySelector('#img-figure');
if ('content' in document.createElement('template')) {
  template = (state) => {
    const img = t.content.querySelector('img');
    const caption = t.content.querySelector('figcaption');
    img.setAttribute('src', state.src);
    img.setAttribute('alt', state.alt || state.caption);
    caption.innerHTML = state.caption;
    return document.importNode(t.content, true);
  }
} else {
  template = (state) => { //fallback case
    const d = document.createElement('div');
    d.innerHTML = t.innerHTML;
    const img = d.querySelector('img');
    const caption = d.querySelector('figcaption');
    img.setAttribute('src', state.src);
    img.setAttribute('alt', state.alt || state.caption);
    caption.innerHTML = state.caption;
    return d.firstElementChild;
  }
}

class ImgFigure extends HTMLElement {
  connectedCallback() {
    this.src = this.getAttribute("src") || null;
    this.caption = this.getAttribute("caption") || "";
    this.alt = this.getAttribute("alt") || null;
    this.render();
  }

  render() {
    this.appendChild(template({
      src: this.src,
      alt: this.alt,
      caption: this.caption,
    }));
  }
}

customElements.define('img-figure', ImgFigure);

HTML 템플릿에 대한 자세한 내용을 보려면 여기를 클릭하십시오.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

HTML 가져오기(비활성화)

HTML 가져오기는 네트워크 구성 요소를 원하는 위치에 전달하는 가장 간단한 방법입니다.
이러한 작업은 문서에서 외부 스타일시트를 가져오는 작업과 동일합니다.

<link rel="import" href="img-figure.html" />

그리고 구성 요소 파일 attachShadow 은 다음과 같이 다른 의존 항목을 추가할 수 있습니다.

<link rel="stylesheet" href="bootstrap.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
...

https://www.html5rocks.com/en/tutorials/webcomponents/imports/

돕다

다음은 네트워크 구성 요소의 개념을 더욱 잘 이해하는 데 도움이 될 것입니다.

https://developers.google.com/web/fundamentals/web-components/

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements

https://developer.mozilla.org/en-US/docs/Web/Web_Components

ShadowRoot 사용 인원/회사

네트워크 구성 요소에 대한 관심을 불러일으키려면:


앤드류 스티브
@ajstacy06

방금 미국의 모든 맥도날드 상점에서 우리의 새 메뉴판 소프트웨어를 발표했다.완전 모듈화.
16:2017년 4월 27일 오후 12시


크비델만

예!웹 구성 요소를 사용하고 있습니다.모든 타임 스탬프는 사용자 정의 요소입니다.
18:2014년 5월 7일 오후 00시
다른 사교적이지 않은 사람들😉
https://github.com/Polymer/polymer/wiki/Who's-using-Polymer?

마지막 생각

네트워크 구성 요소가 매우 좋다.그리고 천천히 모든 브라우저는 완전히 지원하는 방향으로 발전한다.
HTML 가져오기와 템플릿 태그를 지원하는지 확인하지 못하거나 일반 JavaScript 스크립트 include와 함께 사용할 수 있습니다.

대단히 감사합니다

Alex와 Nico가 이 게시물을 돕고 검토해 주셔서 감사합니다.
@nogizhopaboroda | @nvignola
논평을 통해 우리는 네가 인터넷 구성 요소에 대한 견해를 알게 되었다.
WebComponents를 구현할 때 문제가 발생하면 아래의 의견을 통해 저희에게 연락을 주십시오. 저희는 최선을 다해 도움을 드리겠습니다.