Shadow Dom? ???? HTML ?? (? ?? ??)? ?????? ???????

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

1. ? ?? ?? ?? : customElements.define ???? ???? ??? ?? HTML ??? ???? ??????. ?? ??:

    <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <style> /* Component-specific styles go here */ </style> <div> <slot></slot> </div> `; } } customElements.define('my-component', MyComponent);</code>

   ? ??? MyComponent ????? ? ? ??? Dom? ? ??? ???? ??? ?? ?????. mode '??'?? '??'? ? ????. 'Open'??? ???? ??? DOM? ????? ???? ??? ? ??? ?? '??'??? ??? ???? ?????.

2. Shadow Dom : attachShadow ???? ??? ?? ??? ??? ??? Shadow Dom? ??? ???? ?? ?????. mode '??'?? '??'?? ??? ? ????.
3. Shadow Dom? ??? ?? : Shadow Dom? ?? ? ? this.shadowRoot ???? ???? ?? ? ? ????. ?? ???, innerHTML HTML ? CSS? ??? DOM? ?? ???? ? ?????.

4. ? ?? ?? ?? : HTML?? ?? ?? ? ? ?? ??? ??? ? ????.

    <code class="html"><my-component> <p>This is a slotted content!</p> </my-component></code>

   Shadow Dom ?? <slot></slot> ??? <my-component></my-component> ?? ?? ??? ????? ?? ?? ? ??????.

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

? ?? ???? HTML ???? Shadow DOM? ???? ?? ??? ?????

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

1. ??? : Shadow Dom? ?? ?? ??? ??? ??? ??? ?? ??? CSS ? JavaScript? ?? ??? ??? ??? ??? ? ??? ???????. ? ???? ?? ?? ?? ???? ????? ??? ???? ???? ??????.
2. ??? ??? : Shadow Dom? ???? ?? ??? ??? ? ???? ?? ? ? ????. ?? ?? ??? ???? ?? ????? ?? ??? ??? ??? ???? ? ???? ?? ?? ??? ?????? ?????.
3. ??? ? : ??? ? ?? ??? ??? ??? ?? ???? ?? ?? ????? ?? ?? ?? ?? ?????? ??? ? ? ????. ??? ??? ???? ???? ?????.
4. ?? : ???? ????? ??? ?????? ????? ???? ????? ???? ??? ??? ????? ??? ?? ? ? ????.
5. ?? ?? : ?? ??? ???? ????? ?? ?? ?? ??? ?? ?? ????? ?? ???? ?? ??? ?? ?? ? ????? ? ????.
6. ??? : Shadow Dom? ?? ?? ??? ??? ??? ???? ???? ? ?? ??? ???? ???? ? ????.

? ?? ??? Shadow Dom ??? ??? ??? ????????

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

1. ?? ??? : Shadow Dom ?? <style></style> ??? ???? ? ????. ??? ?? ? ???? Shadow Dom?? ??? ???? ??? ??? ??? ??? ????. ?? ??? ????.

    <code class="javascript">this.shadowRoot.innerHTML = ` <style> .my-class { color: blue; } </style> <div class="my-class">Styled content</div> `;</code>

2. CSS ??? ?? ?? : CSS ??? ?? ?? (??)? ???? ???? ???? ?? ?? ?? ???? ???? ?? ? ? ????. ?? ??:

    <code class="javascript">this.shadowRoot.innerHTML = ` <style> .my-class { color: var(--my-color, blue); } </style> <div class="my-class">Styled content</div> `;</code>

   ?? ?? ?? ??? ??? ?? ???? --my-color ??? ? ????.

    <code class="html"><my-component style="--my-color: red;"></my-component></code>

3. CSS ?? : ::part pseudo element? ???? ?? ?????? ?? ??? ???? ? ????. ??? ?? ?? ??? ??????.

    <code class="javascript">this.shadowRoot.innerHTML = ` <style> .my-class { color: blue; } </style> <div part="content" class="my-class">Styled content</div> `;</code>

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

    <code class="css">my-component::part(content) { color: red; }</code>

? ?? ???? Shadow Dom? ??? ? ??? ? ???? ??? ??????

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

1. ???? ?? ??? ?? : Shadow Dom? ??? ??? ????? ?????? CSS ???? ????? ???? ??? ??? ??? ? ????. ??? ??? ?? ? ??? ???? ???? ???? ???? ????.
2. ??? ?? ??? ?? ??? ?? : CSS ??? ?? ??? ?? ? ? ????? ???? ???? ???? ?? ? ? ????. Shadow Dom? ??? ???? ?? ???? ??????.
3. ??? ?? : Shadow Dom? ???? ???? ??? ???? ?? ??? ?? ? ????. Focus Management, ARIA ?? ? ??? HTML? Shadow Dom ??? ???? ???? ??? ??????.
4. ???? ??? : ?? ?? ????? Shadow DOM? ???? ??? ?? ??? ????. ???? ???? ?? ?? ?? ?????? ???????.
5. ?? ?? : ???? ?? ??? ?? ???? DOM ??? ?? ???? ?? ??? ??? ? ? ????. ?? ??? ??? ???? ???? ?? ??? ?? ??? ????.
6. ???? ??? : Shadow Dom? ?????? ???? ? ??? ? ????. ????? ??? ??? ???? Shadow Dom? ???? ???? ?? ??? ? ??? ?? '??'??? ???? ?? ??????.
7. ??? ?? ?? : ??? ??? ???? <slot></slot> ??? ???? ???? ?? ?????. ?? ???? ??? ?? ?? ? ???? ??? ??? ? ????.

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

? ??? Shadow Dom? ???? HTML ?? (? ?? ??)? ?????? ???????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!