如何使用Shadow dom封裝Web組件？

使用Shadow Dom在Web組件中封裝

Shadow Dom是創(chuàng)建真正封裝的Web組件的關(guān)鍵部分。它允許您從頁(yè)面的其余部分封裝組件的內(nèi)部結(jié)構(gòu)（HTML，CSS和JavaScript）。這樣可以防止樣式?jīng)_突和意外的副作用。您可以通過(guò)在元素上使用attachShadow()方法創(chuàng)建陰影DOM。此方法將可選的ShadowRootInit對(duì)象作為參數(shù)，它允許您指定陰影DOM的模式。這兩種模式是：

• 'open' （默認(rèn)）：主文檔的樣式可能會(huì)影響陰影dom，反之亦然。這提供了更大的靈活性，但減少了封裝。
• 'closed' ：主文檔的樣式不會(huì)影響陰影DOM，反之亦然。這提供了更強(qiáng)的封裝，防止風(fēng)格出血和意外替代。

這是用Shadow dom創(chuàng)建Web組件的示例：

 <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()方法創(chuàng)建了陰影DOM，并且內(nèi)部HTML（包括樣式）被添加到其中。 :host偽選擇器允許您為自定義元素本身設(shè)計(jì)樣式。因?yàn)槲覀兪褂昧?code>mode: 'closed' ，所以主頁(yè)的樣式不會(huì)影響該組件的外觀。

與其他封裝技術(shù)相比，使用Shadow DOM有什么好處？

陰影DOM比其他封裝技術(shù)的好處

與其他封裝技術(shù)相比，例如使用唯一的CSS類(lèi)名稱(chēng)或JavaScript名稱(chēng)空間，Shadow dom提供了幾個(gè)關(guān)鍵優(yōu)勢(shì)：

• 更強(qiáng)的封裝： Shadow Dom提供了更強(qiáng)大的封裝形式。它完全將組件的內(nèi)部樣式和HTML與頁(yè)面的其余部分隔離，以防止意外樣式?jīng)_突并確?？深A(yù)測(cè)的行為。這比依靠獨(dú)特的班級(jí)名稱(chēng)要好得多，這些名稱(chēng)仍然可以意外地覆蓋或受級(jí)聯(lián)樣式影響。
• 可維護(hù)性的提高：由于其強(qiáng)大的封裝，Shadow dom使維護(hù)和更新組件變得更加容易。組件內(nèi)的變化不太可能對(duì)應(yīng)用程序的其他部分產(chǎn)生意外后果。
• 可重用性：陰影DOM的包封的性質(zhì)使組件在不同的項(xiàng)目和上下文中都可以重復(fù)使用。您可以自信地使用組件，而不必?fù)?dān)心樣式?jīng)_突或意外行為。
• 改進(jìn)的性能（在某些情況下）：瀏覽器可以比其他技術(shù)更有效地優(yōu)化陰影DOM組件的渲染。這可能會(huì)導(dǎo)致性能的提高，尤其是在復(fù)雜的應(yīng)用中。
• 本機(jī)瀏覽器支持： Shadow DOM是本機(jī)瀏覽器功能，比使用解決方法或庫(kù)的兼容性和更好的性能。

如何在不影響網(wǎng)頁(yè)的其他部分的情況下有效地使用Shadow Dom進(jìn)行樣式組件？

帶有陰影圓頂?shù)脑煨徒M件有效

Shadow dom中的樣式組件很簡(jiǎn)單，但需要了解:host偽選擇器和CSS范圍范圍的工作。

• 內(nèi)部樣式表：最常見(jiàn)和推薦的方法是使用<style></style>標(biāo)簽直接將樣式直接嵌入組件的陰影DOM中。這可以使樣式保持本地化并防止沖突。
• :host偽selector：此偽選擇器針對(duì)自定義元素本身，從而使您可以從陰影DOM內(nèi)部對(duì)主機(jī)元素進(jìn)行樣式。
• Scoped CSS：由于Shadow Dom的封裝，Shadow Dom中的樣式不會(huì)影響主文檔，而反之亦然（以“封閉”模式）。這消除了對(duì)復(fù)雜的班級(jí)名稱(chēng)方案的需求，以防止樣式?jīng)_突。
• CSS變量（自定義屬性）：使用CSS變量將樣式從外部傳遞到陰影DOM。這允許在不損害封裝的情況下進(jìn)行一定程度的自定義。

使用內(nèi)部樣式表和: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 ）從外部自定義邊框顏色。默認(rèn)顏色是黑色的。

我可以從外部訪問(wèn)和操縱元素，如果是的話，如何？

從外部訪問(wèn)和操縱陰影元素

通常不建議您直接訪問(wèn)和操縱陰影DOM內(nèi)的元素，因?yàn)樗鼤?huì)破壞封裝并可能導(dǎo)致脆弱的代碼。但是，在某些情況下可能有必要。這里有幾種方法：

• 使用querySelector和querySelectorAll ：如果您知道陰影DOM中元素的選擇器，則可以使用這些方法訪問(wèn)它。但是，這很脆弱，因?yàn)閮?nèi)部結(jié)構(gòu)的變化可能會(huì)破壞您的代碼。需要在shadowRoot屬性上調(diào)用querySelector方法。
• 使用shadowRoot屬性：如果您有對(duì)自定義元素的引用，則可以訪問(wèn)其shadowRoot屬性以穿越陰影DOM。
• 公開(kāi)API：最好的做法是在Web組件中創(chuàng)建公共方法或?qū)傩?，以以受控方式進(jìn)行外部交互。這保持封裝并允許可預(yù)測(cè)的行為。

使用querySelector訪問(wèn)元素的示例：

 <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>

此示例直接訪問(wèn)陰影DOM中的<p></p>元素。但是，這通常是灰心的。最好在MyComponent類(lèi)中公開(kāi)一種方法，該方法允許以受控且可維護(hù)的方式更新文本。例如：

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

現(xiàn)在，您可以使用： myComponent.textContent = "New text";
這種方法保持封裝并使您的代碼更加穩(wěn)健。

以上是如何使用Shadow dom封裝Web組件？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！