个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在为第三方网站构建一个小部件，使用影子 DOM 来防止他们的 CSS 干扰我们的。我正在使用 ShadyDOM和 ShadyCSS polyfills 使其在 Edge 和 IE 中工作，但它并没有像我期望的那样为 shadow DOM 转换 CSS。
例子:
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM test</title>
</head>
<body>
<div id="container">container is here</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
<script>
const shadow = document.getElementById("container").attachShadow({ mode: "open" });
const style = document.createElement("style");
style.innerHTML = `
:host .stuff {
background: #ff00ff;
}
`;
shadow.appendChild(style);
const div = document.createElement("div");
div.classList.add("stuff");
div.innerHTML = "stuff inside shadow dom";
shadow.appendChild(div);
</script>
</body>
</html>stuff正如我所料， div 有粉红色的背景。但是在 Edge(它本身不支持 shadow DOM)中，我看到了“shadow dom 内的东西”文本(意味着我的脚本运行并且 ShadyDOM 函数有效)，但我没有看到粉红色的背景。
div s、button s 等)，而不是使用我自己的元素或模板 ，尽管如果可以轻松完成，我愿意考虑模板和/或自定义元素，而不必进行很多大的更改。
最佳答案
使用 ShadyCSS :host CSS 伪元素在 Edge 中是未知的。
要使其工作，您应该使用 ShadyCSS.prepareTemplate()这将用自定义元素的名称替换 :host 并将样式定义为将应用于所有页面的全局样式。
请记住，Edge 中没有 Shadow DOM:对于带有虚假/填充的 Shadow DOM 的 CSS 没有边界/范围。
在您的情况下，您可以使用 ShadyCSS.prepareTemplate( yourTemplate, 'div' )如下例所示:
ShadyCSS.prepareTemplate( tpl, 'div' )
container.attachShadow( { mode: "open" } )
.appendChild( tpl.content.cloneNode(true) )<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
<template id=tpl>
<style>
:host .stuff {
background: #ff00ff;
}
</style>
<div class=stuff>stuff inside shadow dom</div>
</template>
<div id=container>container is here</div>div .stuff 匹配的 HTML 代码部分，您可能会观察到一些副作用。 .
:host与
div#containter :
container.attachShadow( { mode: "open" } )
.appendChild( tpl.content.cloneNode(true) )<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
<template id=tpl>
<style>
div#container .stuff {
background: #ff00ff;
}
:host .stuff {
background: #ff00ff;
}
</style>
<div class=stuff>stuff inside shadow dom</div>
</template>
<div id=container>container is here</div>关于javascript - ShadyCSS polyfill 无法正确处理 Edge 中的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58174537/
25
4
0
我正在为第三方网站构建一个小部件，使用影子 DOM 来防止他们的 CSS 干扰我们的。我正在使用 ShadyDOM和 ShadyCSS polyfills 使其在 Edge 和 IE 中工作，但它并没
我是一名优秀的程序员,十分优秀！