? ???? ? ??? ?? ??: ??? ??? UI ?? ?? ???

? ?? ?? ? ?? ??? ??? ? ??????, ????? ? ?????? ???? ???? ??? ??? ??? ?? ??? ???? ?? ??? ?? ??? ?????. ? ?? ??? ???? ???? ??????? ?? ??? ??? ?? ?? ???? ??? ???? ?? ???? UI ??? ?? ? ????. ? ?? ??? ?? ??? ????, ??? ?????, ? ??? ???? ??? ???????.

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

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

1. ?? ??: ??? HTML ??? ?????.
2. Shadow DOM: ??? ??? ???? ?? ???? ?????.
3. HTML ???: ?? ??? ?? ??? ? ?? ??? ??? HTML ???? ?????.
4. ES ??: JavaScript ??? ? ?? ??? ??? ? ????.

??? ??? ???? ???? CSS ?? JavaScript? ??????? ?? ??? ???? ??? ??? ???? ??? ??? ??? UI ??? ?? ? ????.

??? ??: ? ????? ??

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

?? ?? ???

1. ?? ??? ??: HTMLElement ???? ???? JavaScript ???? ????.
2. ?? ?? ??:connectedCallback,connectedCallback,attributeChangedCallback? ?? ?? ?? ???? ???? ??? ?? ??? ?????.

?:

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); // Create Shadow DOM
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        button {
          background-color: blue;
          color: white;
          font-size: 16px;
        }
      </style>
      <button>Click Me</button>
    `;
  }
}

// Define the custom element
customElements.define('my-button', MyButton);

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

Shadow DOM: ? ?? ??? ???

Shadow DOM? ???? ? ?? ??? ?? ??? ??? ?? ??? DOM ??? ?? ? ????. ??? ?? ?? ??? ???? ????? ???? ???? ???? ?? ??? ?? JavaScript?? ??? ??? ? ????.

• ???: ?? ??? Shadow DOM ?? ???? DOM ??? ???? ??? ?? ????? ????? ??? ?? ? ????.
• ?? ??: ?? ?? ??? ?? ??? ??? ?? ?? ?? ?? ??? ???? ??? ? ????.

Shadow DOM ?? ?:

MyCard ???? HTMLElement? ?????.
  ???() {
    ???();
    this.attachShadow({ ??: '??' });
  }

  ?????() {
    this.shadowRoot.innerHTML = `
      <???>
        .?? {
          ???: 1px ??? #ddd;
          ??: 20px;
          ??? ??: 5px;
          ???: #f4f4f4;
        }
      </???>
      <div>



<p>??? .card ???? my-card ??? Shadow DOM?? ??? ???? ?? ??? ?? .card ????? ??? ??? ????.</p>


<hr>

<h3>
  
  
  <strong>HTML ???: ??? ??? ???</strong>
</h3>

<p><strong>HTML <template> ??? ???? ???? ? ?? HTML? ??? ? ????. <???> ??? ???? ??? ? ????? ??? ??? ??? ???? DOM? ??? ? ????.

<p><strong>?:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><???>



<p>??? ????? ??? ? ??? ???? ???? ??? ????? UI? ??? ???? ? ?? ??? ??? ?????.</p>


<hr>

<h3>
  
  
  <strong>? ????? ???? ??</strong>
</h3>

<ol>
<li>
<strong>????</strong>: ?? ??? ? ?? ??? ???? ?? ?? ?? ?? ? ???????? ??????? ???? ? ????.</li>
<li>
<strong>???</strong>: Shadow DOM? ?? ??? ?? ??? ? ??????? ???? ??? ???? ?? ??? ? ?? ????.</li>
<li>
<strong>????? ????</strong>: ? ?? ??? ?? ? ??? ???? ???????. ?, ?? ??? ?? ??? ?????(?: React, Angular, Vue)?? ??? ? ????.</li>
<li>
<strong>?? ???</strong>: ? ?? ??? ?? JavaScript ?? ? ?????? ?? ??? ? ???? ?? ??????? ???? ??? ? ????.</li>
<li>
<strong>??? ?? ??</strong>: ? ?? ??? ??? ??? ???? ???? ?? ??? ??? ???? ? ?? ??? ?? ??? ??? ? ????.</li>
</ol>


<hr>

<h3>
  
  
  <strong>? ?? ??? ?? ??????</strong>
</h3>

<p>? ????? ??? ?? ??? ??? ?????.</p>

• ??? ????? ??????? ??? ? ?? ??? ??? UI ??? ???? ????.
• ???? ??? ??? ?? ???? ??? UI ??? ???? ???.
• ?? ?? ?? ???? ???? ?? ? ?? ????? ? ?????? ???? ????.
• ??? ????? ??????? ???? ???? ??? ??? ?? ??? ???? ????.

??

? ?? ?? ? ??? ?? ??? ???? ???? ?????? ???? ?? ?? ?? ? ??????? ???? ??? ???? ???? UI ?? ??? ??? ? ????. Shadow DOM ? HTML ???? ?? ??? ???? ? ??????? ???? ???? ????? ?? ??? ??? ??? ??? ?? ? ????. ? ????? ???? ?? ????? ?? ??? ???? ? ?? ??? ?? ? ??? ?? ??? ??? ?????.

? ?????? ? ?? ??? ?? ??? ??? ??? ?? ???? ??? ????? ??? ??? ?????!

? ??? ??? ??? UI ???? ?? ? ?? ?? ? ??? ?? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!