??? HTML ??? HtmlElement ? ??? ???? ?????. 1. ???? ???? HtmlElement? ???? ConnectedCallback? ?? ??? ? ???? ??? ???? ?? ??? ?????. 2. CustomElements.define ()? ?? ??? ???? ?? ???? ?? ???? ????????. 3. HTML?? ?? ??? ?? ??? ??????. 4. Attribute Listenge ? Interactive ????? ????? ?? ? Attributes ? AttributeChangedCallback? ??????.

????! ??? ?? ??? ? ?? ??? ??? ???? HTML ??? ??? ?? ??? ???? ?? ? ? ????. ??? ?? ?? ?? ??? ?????? ?? ??? UI ?????? ????? ?? ?????.

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

1. HTMLElement ???? ?? ???? ??????

??? ?? ??? ???? ? ?? ??? HTMLElement ?? ?? ???? JavaScript ???? ???? ????. ? ???? connectedCallback ?? disconnectedCallback ? ?? ???, ???? ??? ???? ???? ??? ??? ?? ? ? ????.

?? ??:

 Class MyButton ?? htmlelement {
  ??? () {
    ???();
    this.attachshadow ({?? : 'Open'});
  }

  ConnectedCallback () {
    this.shadowroot.innerhtml =`
      <???>
        ?? {
          ??? : #007bff;
          ?? : ??;
          ?? : 10px 20px;
          ?? : ??;
          Border-Radius : 4px;
          ?? : ???;
        }
      </???>
      <??> ME </button>? ??????
    `;;
  }
}

? ???? MyButton ??? ???? ???? ???? ?? ? ? ??? ??????.

2. ??? ?? ??? ??????

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

 CustomElements.define ( 'My-Button', MyButton);

?? : ??? ?? ?? ???? ?? ?? HTML ??? ??? ??? ?? ?? ??? - ????????. ?? ??, my-button ? ?????? mybutton ? ? ????.

3. HTML?? ??? ?? ??? ??????

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

 <? ??> </my-button>

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

4. ?? ? ??? ?? ?? (??)

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

?? ?? ??? label ??? ?? ? ? ????.

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

  ??? () {
    ???();
    this.attachshadow ({?? : 'Open'});
  }

  AttributeChangedCallback (??, OldValue, NewValue) {
    if (name === 'label') {
      this.render (newValue);
    }
  }

  ConnectedCallback () {
    const label = this.getAttribute ( 'label') || '?? ??????';
    this.render (???);
  }

  ?? (???) {
    this.shadowroot.innerhtml =`
      <???>
        ?? {
          ??? : #007bff;
          ?? : ??;
          ?? : 10px 20px;
          ?? : ??;
          Border-Radius : 4px;
          ?? : ???;
        }
      </???>
      <??> $ {label} </button>
    `;;
  }
}

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

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

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

????? ?? ??. ??? ?? ??? ?? ??? ???? ??? ?? ?? ??? Shadow Dom ?? ??? ?? ??? ? ????. ?? ??? ????? ? ?? ? ?? ?? ????? ??? ??? ? ????.

? ??? HTML? ??? ?? ??? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!