在CSS中，常常會遇到樣式重疊的問題。這種情況下，不同的樣式規則可能會產生意外的結果，并且可能會影響網站的整體外觀。為了避免這種情況，CSS模塊提供了幾種方法來防止樣式重疊。
第一種方法是CSS作用域。使用CSS作用域，您可以在樣式表中定義模塊，并確保這些模塊的樣式規則不會影響其他模塊。要使用CSS作用域，可以使用 :host 偽類選擇器。這個選擇器只會應用于當前元素，在選擇器中定義的樣式規則不會被傳遞給子元素。
例如，假設我們有一個名為 my-module 的自定義元素，并且我們希望確保 my-module 的樣式規則不會影響其他元素。我們可以創建一個使用 :host 偽類的樣式規則：

<template>
<style>
:host {
display: block;
border: 1px solid black;
}
</style>
<div>My Module Content</div>
</template>

在這個例子中，我們定義了一個樣式規則，它將應用于 my-module 元素。使用 :host 偽類選擇器確保這個樣式規則不會傳遞到子元素。
第二種防止樣式重疊的方法是使用 Shadow DOM。在 Shadow DOM 中，每個元素都擁有自己的 DOM 和樣式隔離空間。這意味著樣式規則只會應用于當前元素，不會影響其他元素。
要使用 Shadow DOM，您可以使用 web 組件規范。 Web組件是一種通用的組件模型，允許您創建可重用的自定義元素。要創建一個使用 Shadow DOM 的組件，只需使用元素的 attachShadow() 方法創建 Shadow DOM 樹。
例如，假設我們有一個名為 my-module 的自定義元素，并且我們希望確保 my-module 的樣式規則不會影響其他元素。我們可以創建一個使用 Shadow DOM 的自定義元素：

class MyModule extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML =
<style>
:host {
display: block;
border: 1px solid black;
}
</style>
<div>My Module Content</div>
;
}
}
customElements.define('my-module', MyModule);

在這個例子中，我們創建了一個名為 MyModule 的自定義元素，并在構造函數中使用 attachShadow() 方法創建 Shadow DOM 樹。我們還定義了一個樣式規則，它將應用于當前元素，不會影響其他元素。
總的來說，使用 CSS作用域和 Shadow DOM 都可以有效地防止樣式重疊。這兩種方法都允許您在樣式表中定義模塊，并確保這些模塊的樣式規則不會影響其他模塊。如果您正在構建一個復雜的網站或應用程序，這些方法將非常有用。