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

Posted 2023-03-06

【中文标题】如何保护嵌入的 div 样式不被网站样式覆盖

【英文标题】：how to protect embedded div style not to be overridden by website style

【发布时间】：2016-12-19 09:38:22

【问题描述】：

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

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

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

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

【问题讨论】：

使用更具体的选择器 - 包含元素 ID 的选择器。 （在大多数情况下应该这样做；可能仍然存在站点设法通过!important 或类似的方式覆盖您的样式的极端情况。您也可以为您的所有属性添加!important，但这可能会导致如果不小心处理，您的组件也会出现问题。）

@CBroe 我用!important这样的标志写了内联样式：<label style="color:green !important"></label>，但即使这样也可以通过使用样式覆盖：label[style] color: yellow !important;写在我的div下面

“但即使这样也可以被覆盖”——当然可以——因为它不是你的网站，你不能指望别的.如果您想要样式的绝对独立性，那么您需要将您的内容与父文档完全分开，就像使用 iframe 一样。

【参考方案1】：

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

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

【讨论】：

Andreas 感谢您的回复，我们在 cmets 讨论这种情况

【参考方案2】：

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

将 Shadow 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>

【讨论】：

你可以在这里找到更多关于 Shdow DOM 的信息：developers.google.com/web/fundamentals/primers/shadowdom