??? ?? ?? API (? ?? ??)? ???? ??? ?? HTML ??? ??? ??????

??? ?? ?? API? ???? ??? ?? HTML ??? ???? ?? ???? ??? HTML ?? ? ??? ?? ? ??? ? ?? ??? ??? ?????. ??? ??? ?? ??? ??? ??? ?? ??? ??????.

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

    <code class="javascript">class MyCustomElement extends HTMLElement { constructor() { super(); // Attach a shadow DOM tree to the element. let shadow = this.attachShadow({mode: 'open'}); // Create elements within the shadow DOM let div = document.createElement('div'); div.textContent = 'This is a custom element!'; shadow.appendChild(div); } }</code>

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

    <code class="javascript">customElements.define('my-custom-element', MyCustomElement);</code>

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

    <code class="html"><my-custom-element></my-custom-element></code>

? ??? ??? ?? ?? ? ???? ??? ?? ??? ??? ??? ?????. ??? ?? ?? ??, ??? ? ??? ???? ???? ??? ?? ??? ??? ?????? ? ?? ? ? ????.

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

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

• ??? : ??? ?? ??? ???? HTML, CSS ? JavaScript? ??? ?? ??? ??? ?? ??? ??? ??? ??? ? ? ????. ? ???? ???? ?? ??? ??????.
• ??? ? : ?? ??? ?? ??? ???? ??? ???? ?? ?? ?????? ??? ? ? ????. ?? ?? ??? ?? ??? ??? ?????? ???? ?????.
• ?? ?? : ??? ?? ??? ?? HTML ???? ????? ???? ???? ???? ?? ??? ? ????. ??? ?? HTML? ???? ???? ?? ??? ????? CSS? ???? ??? ? ????.
• ?? ??? : ??? ?? ??? ?? ?????? ????? ?? ? ?? ? ??? ??? ? ????? ??? UI ?? ??? ????? ??? ???? ?????.
• ?? : ??? ??? ??? ?? ??? ?? ? ??????? ??? ?? ??? DOM ?? ? ???? ???? ????? ? ?? ????? ??? ????? ? ??? ? ? ????.
• ??? ??? ?? : ??? ?? ? ??? ?? ??? ??? ?? ?? ??? ?? ? ???? ???? ??? ??? ?? ? ? ????.

??? ?? ?? API? ?? HTML ??? ?? ? ? ?????

?, '??? ?? ? ?? ??'? ???? ??? ?? ?? API? ???? ?? HTML ??? ?? ? ? ????. ? ?? ??? ???? ??? ?? ??? ????? ?? ??? ??? ???? ? ????. ??? ? ??? ??? ??? ????.

1. ?? HTML ??? ???? ??? ?? :
   HTMLElement ???? ?? HTMLButtonElement ? ?? ?? HTML ?? ???? ?????.

    <code class="javascript">class FancyButton extends HTMLButtonElement { constructor() { super(); this.addEventListener('click', () => alert('Fancy button clicked!')); } }</code>

2. ??? ?? ?? ?? :
   ??? ?? ? ? ???? ?? ??? ??? ???? ??? ?? ? ???? ?????.

    <code class="javascript">customElements.define('fancy-button', FancyButton, { extends: 'button' });</code>

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

    <code class="html"><button is="fancy-button">Click me!</button></code>

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

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

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

• ???? ?? ?? : Custom Elements API? Chrome, Firefox, Safari ? Edge? ??? ?? ?? ?????? ?????. ??? ??? ??? ??? ???? ?? ???? ?? ??? ???????.

• ?? ?? : ??? ?? ??? ???? ?? ?? ????? ?? ?? ?? ???? ??? ??? ?? ? ? ????. ? ?? ?? ????? webcomponents.js PolyFill? ??? ???? ???? ?????.

   <code class="html"><script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script></code>

• ??? ?? : ???? ?? ?????? ???? ???? ?? ??? ?? ??? ??????. ?, ??? ?? ??? ??? ???? ???? ? ?? ????? ????? ????????.

• ?? ?? : ?? ?? ??? ???? ???? ?? ??? ?? ?? API? ????? ??????. ??? window.customElements ? ??? ???? ?? JavaScript? ???? ?? ? ? ????.

   <code class="javascript">if ('customElements' in window) { customElements.define('my-custom-element', MyCustomElement); } else { // Fallback for browsers that do not support custom elements }</code>

• ??? ? ?? : ?? ?????? ???? ?? ??? ?? ? ??????? ?? ??? ???? ???? ??? ?? ??? ?????.

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

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