? ?? ??? ??? ??? ??? ?? ??? HTML ??? ??? ? ???? ???? ???? ?? ?????. 1. ?? ? ??? ??? ?? ??? ???? ? ?? ??? ??? ???? ??? ?? ? ? ????. 2. ??? ?? ??? ???? ? ??? ?????. ? ??? ?????. 3. LifeCycle ???? ConnectedCallback (??? ??? ?), DisponnectedCallback (?? ? ? ??? ?), AttributeChangedCallback (??? ?? ? ? ???) ? ?? ? Callback (?? ??? ???)? ?????. 4. ?? ?? ??? ?? ???? ??? ??? ?? ?? ??? ?? (? : ? ??)? ???????. 5. ?? ????? ? ?? ??? ????? ?? IE? ???? ????. 6. Shadow Dom? ???? ??? ??? ????? ??? ???? ???? ??? ? ? ????. 7. ???? ??? ? ?? ??????? ??????. ? ??? ????? ??? ??? ???? ?? ?? ?? ?? ??? ???? ? ????.

? ?? ??? ???? ??? ?? ???? ?? ???? ?????. ??? ??? ???? ??? HTML? ??? ???? ??? ??? ?? ??? ?? ? ????. ??? ??? ????? ????? ???? ?? ? ? ?? ?????.

? ?? ??? ??????

??? ???, ? ?? ??? ??? ??, ??? ? ??? ??? ? ??? ??? HTML ??? ?? ??? ????? ?? ?? ?? ?????. ?? ?? ?? ? ??? "??? ?? ??"???. <my-button></my-button> ?? <data-card></data-card> ? ?? ??? ???? ????? ?? ? ????.

??? ?? ??? ???? ???

??? ?? ??? ???? ?? ? ??? ????. ???? ???? ??? ??????.

??, HTMLElement ?? ???? ???? ???????. ? ?????? constructor() ???? ?? ??? ????? ????? this.attachShadow({ mode: 'open' }) ? ?? Shadow dom? ?? ? ????.

?? ?? ??? ??? ???? customElements.define() ???? ?? ? ??? ??????. ?? ??:

 Class MyButton ?? htmlelement {
  ??? () {
    ???();
    this.attachshadow ({?? : 'Open'});
    this.shadowroot.innerhtml =`
      <??> ME </button>? ??????
      <???>
        ?? {
          ??? : #4CAF50;
          ?? : ??;
          ?? : 10px;
        }
      </???>
    `;;
  }
}

CustomElements.define ( &#39;My-Button&#39;, MyButton);

?? html?? <my-button></my-button> ?? ??? ? ???? ?? ??? ??? ? ? ????.

??? ?? ??? ?? ???? ??

??? ??? ?? ??? ??? ? ? ???? ? ????? ? ?? ????? ???? ???? ??? ????.

• connectedCallback : ??? ??? ?? ? ? ????? ??? ??? ?????.
• disconnectedCallback : ???? ??? ?? ? ? ???? ??? ??? ?????.
• attributeChangedCallback(attrName, oldVal, newVal) : ??? ??? ???? observedAttributes ? ?? ???????.
• adoptedCallback : ??? ? ??? ??? ? ???? ????? ???? ????.

?? ??, ?? ??? ?? ??? ???? ???? ????? ??

 static get ObservedAttributes () {
  ?? [ 'label'];
}

AttributeChangedCallback (??, OldValue, NewValue) {
  if (name === 'label') {
    this.shadowRoot.QuerySelector ( 'Button'). TextContent = NewValue;
  }
}

?? ?? html?? :

 <my-button label = "??"> </my-button>

?? ?? ??? ?? ??

• ?? ?? ?? : ??? ?? ?? ???? <my-button></my-button> ? ?? ?? ?? ? (?? ??)? ???????, ?? ??? ?? ???? ??? ????? ????.
• ??? : ? ?? ??? ?? ??? ?????? ????? ????? ??? ? ????.
• ??? ?? : Shadow Dom? ???? ???? ? ?? ? ? ??? ??? ???? ?? ??? ??? ???? ???? ??? ??? ??? ? ????.
• ?? ??? : ? ??? ?? ??? ??? Shadow Dom? ?????. ?? ? ?? ???? ?? ?? ??? ??? ????????.

????? ?? ??. ??? ?? ??? ????? ?? ? ????? ??? ??? ???? ??? ?? ????? ???? ?? ? ? ????.

? ??? HTML? ??? ? ?? ?? ?? (??? ?? ??)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!