지금 http://jauyeung.net/subscribe/에 내 이메일 목록을 구독하십시오.
트위터에 팔로우 해주세요.
기사 더 보기 https://medium.com/@hohanga
기사 더 보기 http://thewebdev.info/
웹 응용이 갈수록 복잡해지면서, 우리는 코드를 관리 가능한 블록으로 나누는 어떤 방법이 필요하다.이를 위해 웹 구성 요소를 사용하여 여러 곳에서 사용할 수 있는 재사용 가능한 구성 요소를 만들 수 있습니다.
웹 구성 요소도 다른 코드 세션과 분리되어 있기 때문에 다른 코드 세션에서 의외로 수정하고 충돌 코드를 만들기 어렵다.
본 논문에서 우리는 웹 구성 요소의 서로 다른 부분과 기본 부분을 어떻게 만드는지 연구할 것이다.

웹 구성 요소의 일부

웹 구성 요소에는 세 가지 주요 부분이 있습니다.그것들은 코드 충돌을 걱정하지 않고 우리가 언제든지 다시 사용할 수 있는 기능을 함께 봉인했다.

custom element-JavaScript API 집합으로 사용자 정의 요소와 행동을 정의할 수 있으며 UI

에서 필요에 따라 사용할 수 있습니다.

shadow DOM - 요소를 첨부하는 패키지된 shadow DOM 트리의 JavaScript API 세트입니다.기본 문서 DOM과 별도로 표시됩니다.이것은 요소의 기능을 사유화하기 때문에 스크립트를 작성할 수 있으며 문서의 다른 부분과 충돌할 염려가 없다

HTML 템플릿 - template 또는 slot 요소로 렌더링 페이지에 표시되지 않은 태그 템플릿을 작성할 수 있습니다.그것들은 사용자 정의 요소 구조의 기초로 여러 번 반복해서 사용할 수 있다.

웹 구성 요소 만들기

웹 구성 요소를 만들려면 다음 절차를 따르십시오.

웹 구성 요소 기능을 지정하는 클래스나 함수를 만듭니다.

CustomElementRegistry.define() 방법으로 새로운 사용자 정의 요소를 등록하여 정의할 요소 이름, 지정된 기능의 클래스나 함수, 그리고 그 중에서 계승할 요소

를 전달한다.

방법을 사용하여 그림자 DOM을 사용자 정의 요소에 추가합니다.기본 DOM 방법

을 사용하여 하위 요소, 이벤트 탐지기 등을 그림자 DOM에 추가

및 Element.attachSHadow() 태그를 사용하여 HTML 템플릿을 정의합니다.우리는 일반적인 DOM 방법을 사용하여 템플릿을 복제하고 그림자 DOM에 추가합니다.

다른 일반적인 HTML 요소

와 마찬가지로 페이지에서 우리가 좋아하는 모든 곳에 사용자 정의 요소를 사용합니다

기본 예

template 정의된 사용자 정의 요소 목록을 저장합니다.이 대상은 페이지에 새로운 사용자 정의 요소를 등록하고 어떤 사용자 정의 요소를 등록했는지 정보를 되돌려줍니다.
페이지에 새로운 사용자 정의 요소를 등록하려면 slot 방법을 사용합니다.그것은 다음과 같은 논점을 채택했다.

요소 이름을 나타내는 문자열입니다.점선이 필요합니다.그것들은 한 단어일 리가 없다.

원소 행위를 정의하는 클래스 대상

선택 가능한 매개 변수로 CustomElementRegistry 속성을 포함하고 이 속성은 우리 요소가 계승하는 내장 요소(있을 경우)를 지정한다

다음과 같이 사용자 정의 요소를 정의할 수 있습니다.

class WordCount extends HTMLElement {  
  constructor() {  
    super();  
    const shadow = this.attachShadow({  
      mode: 'open'  
    });  
    const span = document.createElement('span');  
    span.textContent = this.getAttribute('text').split(' ').length;  
    const style = document.createElement('style');  
    style.textContent = 'span { color: red }';  
    shadow.appendChild(style);  
    shadow.appendChild(span);  
  }  
}

customElements.define('word-count', WordCount);

위 코드에서, 우리는 호출 CustomElementRegistry.define() 을 통해 그림자 DOM을 문서에 추가합니다.extends를 attachShadow로 설정하면 루트 외부의 JavaScript에서 그림자 루트에 접근할 수 있습니다.그것도 mode일 수 있는데, 뜻은 상반된다.
그리고 우리는 'open' 요소를 만들었다. 이 요소에서 텍스트 내용을 'closed' 속성의 span으로 설정하고 그 중의 단어를 빈칸이 있는 곳으로 나누었다.
다음에 우리는 text 요소를 만들고 내용을 length로 설정했다.
마지막으로 섀도우 DOM 루트에 모두 첨부합니다.
주의해라, 우리 반에서 우리는 확장했다 style.우리는 사용자 정의 요소를 정의하기 위해 이렇게 해야 한다.
다음과 같은 새로운 요소를 사용할 수 있습니다.

<word-count text='Hello world.'></word-count>

두 가지 유형의 사용자 정의 요소가 있습니다.그들은 다음과 같습니다.

자치 사용자 정의 요소 - 독립된 요소로 표준 HTML 요소로부터 계승되지 않습니다.우리는 직접 명칭을 인용해서 그것들을 만들 수 있다.예를 들어 우리는 color: red 또는 HTMLElement를 쓸 수 있다.

사용자 정의 내장 요소 - 기본 HTML 요소를 상속합니다.이러한 유형의 요소를 만들기 위해 내장 HTML 요소 중 하나를 확장할 수 있습니다.우리는 그것들을 쓰기 <word-count> 또는 document.createElement("word-count") 를 통해 사용할 수 있다.

우리가 이전에 만든 사용자 정의 요소는 자치의 사용자 정의 요소이다.다음과 같은 방법으로 사용자정의 요소를 생성할 수 있습니다.

class WordCount extends HTMLParagraphElement {  
  constructor() {  
    super();  
    const shadow = this.attachShadow({  
      mode: 'open'  
    });  
    const span = document.createElement('span');  
    span.textContent = this.getAttribute('text').split(' ').length;  
    const style = document.createElement('style');  
    style.textContent = 'span { color: red }';  
    shadow.appendChild(style);  
    shadow.appendChild(span);  
  }  
}

customElements.define('word-count', WordCount, {  
  extends: 'p'  
});

다음 페이지에 다음과 같이 적으십시오.

<p is='word-count' text='Hello world.'></p>

보시다시피 자주적 맞춤형 요소와 맞춤형 내장 요소는 큰 차이가 없다.유일한 차이점은 우리가 <p is="word-count"> 확장한 것이지 document.createElement("p", { is: "word-count" }) 확장한 것이 아니다.
그리고 우리는 사용자 정의 내장 요소에서 요소 이름을 사용하지 않고 HTMLParagraphElement 속성을 사용하여 사용자 정의 요소를 인용합니다.

내부와 외부 스타일

우리도 위와 같이 내부 스타일을 사용하지 않고 아래와 같은 외부 스타일을 참고할 수 있다.예를 들어 다음과 같이 쓸 수 있습니다.

const linkElem = document.createElement('link');  
linkElem.setAttribute('rel', 'stylesheet');  
linkElem.setAttribute('href', 'style.css');  
shadow.appendChild(linkElem);

이것은 HTMLElement의 양식을 인용했다.HTML과 일반 DOM 작업에서 했던 것처럼 is 요소를 만들었습니다.
웹 구성 요소를 만드는 것은 간단합니다.우리는 이 기능에 대해 클래스나 함수를 정의한 다음 style.css 방법으로 사용자 정의 요소 등록표에 넣기만 하면 된다.
우리는 기존 원소, 예를 들어 link 원소를 확장하거나 처음부터 만들 수 있다.또한 customElements.define 요소를 만들고 외부 파일을 인용해서 내부 스타일을 추가하거나 외부 스타일을 인용할 수 있습니다.