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

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

Shadow Dom? ???? ??? ? ? ?? ??? ??? ? ??? ?????. ??? ????? ?? ??? ?? ?? (HTML, CSS ? JavaScript)? ??? ? ? ????. ??? ???? ??? ???? ?? ???? ?????. ???? attachShadow() ???? ???? ??? dom? ????. ? ???? ??? ShadowRootInit ??? ??? ???? Shadow Dom? ??? ??? ? ????. ? ??? ??? ????.

• 'open' (???) : ?? ??? ???? Shadow Dom? ??? ? ? ??? ? ??? ???????. ??? ? ?? ???? ????? ???? ????.
• 'closed' : ?? ??? ???? Shadow Dom? ??? ? ? ??? ? ??? ???????. ??? ? ?? ???? ???? ??? ???? ???? ????? ??? ? ???? ?????.

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

 <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'closed' }); // Use 'open' if needed // Create internal HTML const div = document.createElement('div'); div.innerHTML = ` <style> :host { display: block; border: 1px solid black; } p { color: blue; } </style> <p>This is my component!</p> `; this.shadowRoot.appendChild(div); } } customElements.define('my-component', MyComponent);</code>

? ??? ??? ?? ?? my-component ?????. attachShadow() :host ?? ???? ???? ??? ?? ?? ??? ???? ? ? ????. ??? mode: 'closed' , ?? ???? ????? ?? ??? ??? ??? ??? ????.

?? ??? ??? ?? Shadow DOM? ???? ?? ??? ?????

?? ??? ??? ?? ??? dom? ??

Shadow Dom? ?? ? CSS ??? ?? ?? JavaScript ?? ????? ???? ?? ?? ?? ??? ??? ???? ??? ?? ? ?? ?? ??? ?????.

• ??? ??? : Shadow Dom? ?? ? ??? ??? ???? ?????. ??? ?? ??? ?? ???? HTML? ??? ????? ??? ???? ??? ? ??? ??? ???? ?? ??? ??? ?????. ?? ?? ? ??? ??? ???? ??? ?? ????, ?? ??? ??? ???? ?? ??? ????? ????? ? ????.
• ?? ?? ?? : ??? ???? ?? Shadow Dom? ?? ??? ? ?? ?? ???? ???? ? ? ??????. ?? ?? ?? ??? ?? ????? ?? ??? ???? ?? ??? ??? ???? ????.
• ??? ? : Shadow Dom? ??? ? ??? ?? ????? ?????? ?? ??? ?? ? ??? ? ??????. ??? ???? ??? ?? ??? ?? ???? ?? ?? ??? ???? ??? ? ????.
• ?? ? ?? (??? ??) : ????? ?? ???? Shadow DOM ?? ??? ?????? ????? ??? ? ? ????. ?? ?? ?? ??? ?? ???? ??? ?? ? ? ????.
• ?? ???? ?? : Shadow Dom? ?? ???? ???? ?? ???? ?????? ???? ??? ? ?? ???? ??? ?????.

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

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

Shadow Dom? ???? ?? ??? ????? :host ?? ??? ? CSS ?? ?? ??? ???????.

• ?? ??? ?? : ?? ????? ???? ?? ??? <style></style> ??? ???? ?? ??? Shadow Dom ?? ?? ???? ????? ????. ??? ???? ????? ??? ?????.
• :host ?? ??? : ? ?? ???? ??? ?? ?? ??? ?????? Shadow Dom ??? ??? ??? ???? ? ? ????.
• ?? CSS : Shadow Dom? ???? ?? Shadow Dom ?? ???? ?? ??? ??? ??? ??? ( 'Closed'????) ? ??? ??? ??? ????. ?? ?? ??? ??? ???? ?? ??? ??? ?? ??? ???? ????.
• CSS ?? (??? ?? ??) : CSS ??? ???? ???? ???? ??? DOM?? ?????. ?? ?? ???? ????? ?? ?? ??? ??? ??? ?????.

?? ??? ?? ? :host ?? ? :

 <code class="html"><my-component style="--my-color: red;"></my-component> <style> my-component { /* styles applied to the outside of the shadow root */ } my-component::part(my-part) { /* styles applied to a specific part inside the shadow root */ } </style></code>

 <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); // or 'closed' this.shadowRoot.innerHTML = ` <style> :host { display: block; border: 1px solid var(--my-color, black); /* Default to black if not specified */ } p { color: blue; } </style> <p>This is my component!</p> `; } }</code>

? ??? CSS ?? ( --my-color )? ???? ???? ??? ??? ??? ???? ??? ?????. ?? ??? ?? ????.

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

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

???? ??? Dom ??? ??? ?? ????? ???? ?? ????? ???? ?? ??? ?? ??? ??? ? ?? ??? ?????. ??? ??? ??? ????. ? ?? ??? ??? ????.

• querySelector ? querySelectorAll ?? : Shadow DOM ?? ??? ???? ?? ???? ???? ???? ??? ? ? ????. ??? ?? ?? ??? ??? ?? ? ? ?? ??? ??? ??? ?? ????. querySelector ???? shadowRoot ???? ????????.
• shadowRoot ?? ?? : ??? ?? ??? ?? ????? ?? shadowRoot ??? ????? Shadow Dom? ?? ? ? ????.
• ?? API ?? : ?? ??? ?? ?? ??? ?? ? ???? ???? ? ?? ?? ??? ?? ?? ?? ??? ??? ????. ??? ???? ???? ?? ??? ??? ?????.

querySelector ???? ??? ????? ? :

 <code class="javascript">const myComponent = document.querySelector('my-component'); const paragraph = myComponent.shadowRoot.querySelector('p'); paragraph.textContent = 'This text has been changed from the outside!';</code>

? ??? ??? dom ?? <p></p> ??? ?? ??????. ??? ??? ????? ?????. MyComponent ????? ???? ???? ?? ?? ??? ???? ???? ? ??? ???? ???? ?? ?? ????. ?? ??:

 <code class="javascript">class MyComponent extends HTMLElement { // ... (constructor as before) ... set textContent(newText) { this.shadowRoot.querySelector('p').textContent = newText; } }</code>

?? ???? ???? ?? ???? ???? ??? ?? ???? ? ? ????. myComponent.textContent = "New text";
? ???? ???? ???? ????? ???? ?????.

? ??? ? ?? ??? ???? Shadow Dom? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!