如何保护嵌入式 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 使之成为可能的：

将阴影 DOM 附加到您要保护的元素（此处： #scope-div),
把你想保护的HTML代码放在Shadow里DOM,
从 <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>

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

how to protect embedded div style not to be overridden by website style

css

sass

less

shadow-dom

webpack