Custom Tag
Javascript Custom HTMLElement
JavaScript로 CustomElement 작성법 # 이 글은 Javascript로 Custom HTMLElemnet를 만드는 방법을 포함합니다.
이 글은 Node.js와 npm의 기능에 대해 설명하지 않습니다.
Custom Tag를 확인하기 위해 Node와 npm(node package manager)를 사용했습니다.(별도의 환경에서도 확인 가능합니다.)
Custom HTMLElement만들기 # custom-tag.js
class CustomElement extends HTMLElement { constructor() { super(); // Create a shadow root. const shadowRoot = this.attachShadow({ mode: "open" }); const button = document.createElement("input"); button.type = "button"; button.value = "my button"; shadowRoot.appendChild(button); } } customElements.define("my-custom-tag", CustomElement); index.html