我正在创建一个聊天小部件,它会将div注入他的网站主体。但是,我不希望div从网站的默认样式表中应用CSS。
有没有办法隔离这样的div?
大多数现有解决方案需要更改其网站中的CSS代码,这对我来说是不可能的
答案 0 :(得分:2)
Shadow DOM v1
的功能目前(不断变化) have growing support,提供了丰富的可能性,包括作用域的CSS < /强>
Shadow DOM
v0
已在Chrome / Opera中实施,但其他浏览器供应商正在实施v1
MS Edge状态:Under Consideration
Firefox状态:in-development
来自Google Developers: Shadow DOM v1: Self-Contained Web Components:
传递shadow DOM最有用的功能是作用域CSS:
- 外部页面的CSS选择器不适用于您的组件。
- 内部定义的样式不会流血。它们的范围是主机元素。
在shadow DOM中使用的CSS选择器本地应用于您的组件。实际上,这意味着我们可以再次使用常见的id / class名称,而不必担心页面上其他地方的冲突。更简单的CSS选择器是Shadow DOM中的最佳实践。他们也有利于表现。
在下面,我们attachShadow
向我们应用createElement( "div" )
剥夺权利 all
的新style.all = "unset"
应用于其余部分的规则document
&#39; s div
s。
然后我们将shadow-root
填入我们喜欢的任何内容,并在appendChild( "new_div" )
将我们的内容注入body
之前提供所需的任何样式。
结果是风格上孤立的内容。
const new_style = document.createElement( "style" ),
new_div = document.createElement( "div" ),
new_par = document.createElement( "p" ),
shadow = new_div.attachShadow( { mode: "open" } );
new_style.textContent =
"p { padding: 1em; border-radius: 1em; box-shadow: 2px 2px 15px 5px rgba( 0, 0, 0, .5 ); }";
new_par.textContent = "Shadow DOM FTW \\o/";
new_div.style.all = "unset";
shadow.appendChild( new_style );
shadow.appendChild( new_par );
document.body.appendChild( new_div );
&#13;
body {
background: antiquewhite;
}
div {
margin: 2em;
border: 2px gray solid;
border-right: 0;
border-left: 0;
background: cornflowerblue;
}
p {
margin: inherit;
font-family: "Comic Sans MS";
}
&#13;
<body>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</body>
&#13;
答案 1 :(得分:0)
带有范围内CSS的影子DOM似乎是一个很好的解决方案。但是,它仍未准备就绪,缺少浏览器支持。
我最终使用了Cleanslate CSS。它增加了一个约20KB的CSS。但是做得很好。也支持所有浏览器。
答案 2 :(得分:-1)
我不确定这是否是您所寻求的。但是你可以注入一个链接并指向它,并指向要插入网站的 div 的所需css ......