如何保护嵌入的 div 样式不被网站样式覆盖

Question

我有自己风格的 div。我在其他网站上嵌入了这个 div。

<div id="scoped-div">
  <style>
    label {
      color: green;
    }
  </style>

  <label> Scoped div </label>
</div>

但我遇到了问题，我的 div 样式被网站样式覆盖。我不想使用iframe。除了使用iframe，还有其他方法可以通过外部样式更改来保护我的 div 样式吗？

Answer 1

没有办法完全保护您的样式。但您可以尝试以下方法：

• 尽量指定您的元素选择器（例如，使用属性和 ID）
• 使用内联样式
• 使用!important（但要小心使用宽泛的use of importants）

Answer 2

您的要求正是Shadow DOM 使之成为可能：

1. 将 Shadow DOM 附加到要保护的元素（此处： #scope-div),
2. 将要保护的 HTML 代码放入 Shadow DOM，
3. 从<template> 元素中克隆它以简化操作（可选）。

就是这样！

var div = document.querySelector( "#scoped-div" )
var template = document.querySelector( "template" )

var sh
if ( 'attachShadow' in div )
  sh = div.attachShadow( { mode: "closed" } )  //Shadow DOM v1
else
  sh = div.createShadowRoot()                 //Shadow DOM v0 fallback

sh.appendChild( template.content.cloneNode( true ) )

<template>
  <style>
    label {
      color: green;
    }
  </style>

  <label> Scoped div </label>
</template>

<div id="scoped-div">
</div>