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

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

使用Shadow Dom在Web組件中封裝

Shadow Dom是創建真正封裝的Web組件的關鍵部分。它允許您從頁面的其餘部分封裝組件的內部結構（HTML，CSS和JavaScript）。這樣可以防止樣式衝突和意外的副作用。您可以通過在元素上使用attachShadow()方法創建陰影DOM。此方法將可選的ShadowRootInit對像作為參數，它允許您指定陰影DOM的模式。這兩種模式是：

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

這是用Shadow dom創建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()方法創建了陰影DOM，並且內部HTML（包括樣式）被添加到其中。 :host偽選擇器允許您為自定義元素本身設計樣式。因為我們使用了mode: 'closed' ，所以主頁的樣式不會影響該組件的外觀。

與其他封裝技術相比，使用Shadow DOM有什麼好處？

陰影DOM比其他封裝技術的好處

與其他封裝技術相比，例如使用唯一的CSS類名稱或JavaScript名稱空間，Shadow dom提供了幾個關鍵優勢：

• 更強的封裝： Shadow Dom提供了更強大的封裝形式。它完全將組件的內部樣式和HTML與頁面的其餘部分隔離，以防止意外樣式衝突並確保可預測的行為。這比依靠獨特的班級名稱要好得多，這些名稱仍然可以意外地覆蓋或受級聯樣式影響。
• 可維護性的提高：由於其強大的封裝，Shadow dom使維護和更新組件變得更加容易。組件內的變化不太可能對應用程序的其他部分產生意外後果。
• 可重用性：陰影DOM的包封的性質使組件在不同的項目和上下文中都可以重複使用。您可以自信地使用組件，而不必擔心樣式衝突或意外行為。
• 改進的性能（在某些情況下）：瀏覽器可以比其他技術更有效地優化陰影DOM組件的渲染。這可能會導致性能的提高，尤其是在復雜的應用中。
• 本機瀏覽器支持： Shadow DOM是本機瀏覽器功能，比使用解決方法或庫的兼容性和更好的性能。

如何在不影響網頁的其他部分的情況下有效地使用Shadow Dom進行樣式組件？

帶有陰影圓頂的造型組件有效

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

• 內部樣式表：最常見和推薦的方法是使用<style></style>標籤直接將樣式直接嵌入組件的陰影DOM中。這可以使樣式保持本地化並防止衝突。
• :host偽selector：此偽選擇器針對自定義元素本身，從而使您可以從陰影DOM內部對主機元素進行樣式。
• Scoped CSS：由於Shadow Dom的封裝，Shadow Dom中的樣式不會影響主文檔，而反之亦然（以“封閉”模式）。這消除了對複雜的班級名稱方案的需求，以防止樣式衝突。
• 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 ：如果您知道陰影DOM中元素的選擇器，則可以使用這些方法訪問它。但是，這很脆弱，因為內部結構的變化可能會破壞您的代碼。需要在shadowRoot屬性上調用querySelector方法。
• 使用shadowRoot屬性：如果您有對自定義元素的引用，則可以訪問其shadowRoot屬性以穿越陰影DOM。
• 公開API：最好的做法是在Web組件中創建公共方法或屬性，以以受控方式進行外部交互。這保持封裝並允許可預測的行為。

使用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封裝Web組件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！