JavaScript
맞춤 요소

통사론

• .prototype.createdCallback ()
• .prototype.attachedCallback ()
• .prototype.detachedCallback ()
• .prototype.attributeChangedCallback (name, oldValue, newValue)
• document.registerElement (name, [options])

매개 변수

비고

새 요소 등록

지정된 초 수가 경과 할 때까지 내용을 숨기는 <initially-hidden> 사용자 정의 요소를 정의합니다.

const InitiallyHiddenElement = document.registerElement('initially-hidden', class extends HTMLElement {
  createdCallback() {
    this.revealTimeoutId = null;
  }

  attachedCallback() {
    const seconds = Number(this.getAttribute('for'));
    this.style.display = 'none';
    this.revealTimeoutId = setTimeout(() => {
      this.style.display = 'block';
    }, seconds * 1000);
  }

  detachedCallback() {
    if (this.revealTimeoutId) {
      clearTimeout(this.revealTimeoutId);
      this.revealTimeoutId = null;
    }
  }
});

<initially-hidden for="2">Hello</initially-hidden>
<initially-hidden for="5">World</initially-hidden>

네이티브 요소 확장

범위를 확장 할 수는 있지만 네이티브 요소는 자체 태그 이름을 갖지 않습니다. 대신, is 속성은 요소가 사용할 서브 클래스를 지정하는 데 사용됩니다. 예를 들어,로드 된 콘솔에 메시지를 로깅하는 <img> 요소의 확장 기능은 다음과 같습니다.

const prototype = Object.create(HTMLImageElement.prototype);
prototype.createdCallback = function() {
  this.addEventListener('load', event => {
      console.log("Image loaded successfully.");
  });
};

document.registerElement('ex-image', { extends: 'img', prototype: prototype });

<img is="ex-image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png" />