我有一個自定義元素(沒有陰影DOM),我希望能夠在任何地方使用,即使在另一個可能使用陰影DOM的自定義元素。但是,我不確定如何讓樣式在這兩個地方工作。在陰影內部和外部使用非陰影DOM自定義元素
例如,可以說我創建一個簡單的fancy-button
元素:
class fancyButton extends HTMLElement {
constructor() {
super();
this.innerHTML = `
<style>
fancy-button button {
padding: 10px 15px;
background: rgb(62,118,194);
color: white;
border: none;
border-radius: 4px
}
</style>
<button>Click Me</button>`;
}
}
customElements.define('fancy-button', fancyButton);
<fancy-button></fancy-button>
內陰影DOM元素,插入式的標籤將允許fancy-button
樣式工作。但是,如果此組件在陰影DOM元素外部使用,則每次使用該元素時,樣式標記都將被複制。
如果我將style標籤添加爲html導入文件的一部分,那麼這些樣式只能在陰影DOM之外工作,但至少它們只會聲明一次。
<!-- fancy-button.html -->
<style>
fancy-button button {
padding: 10px 15px;
background: rgb(62,118,194);
color: white;
border: none;
border-radius: 4px
}
</style>
<script>
class fancyButton extends HTMLElement {
constructor() {
super();
this.innerHTML = `<button>Click Me</button>`;
}
}
customElements.define('fancy-button', fancyButton);
</script>
什麼是最好的方式來添加自定義元素樣式處理在陰影DOM內部和外部使用?
最好的方法是第一個解決方案,因爲它是唯一可行的解決方案。另一種方法是測試你是否在Shadow DOM中,然後根據需要添加樣式。 – Supersharp