수색…


통사론

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

매개 변수

매개 변수 세부
이름 새 맞춤 요소의 이름입니다.
options.extends 확장되는 네이티브 요소의 이름입니다 (있는 경우).
options.prototype 사용자 정의 요소에 사용할 사용자 정의 프로토 타입 (있는 경우).

비고

맞춤 요소 사양은 아직 표준화되지 않았으며 변경 될 수 있습니다. 설명서에는 현재 Chrome에서 안정 버전으로 배송 된 버전이 설명되어 있습니다.

맞춤 요소는 개발자가 자바 스크립트를 사용하여 페이지에서 관련 스타일 및 동작과 함께 사용할 수있는 맞춤 HTML 태그를 정의 할 수있게 해주는 HTML5 기능입니다. 그들은 종종 과 함께 사용됩니다.

새 요소 등록

지정된 초 수가 경과 할 때까지 내용을 숨기는 <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" />


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow