https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
这让我很兴奋，我可以在没有聚合物的情况下从头开始编写自己的自定义网页。
才发现css :host例如在 Edge 和 FireFox 中不起作用。我可以不用 html 处理 import现在直到 w3c 弄清楚他们想用 es6 模块做什么，但是每个浏览器都有自己的一半实现了没有 css 的 Shadow DOM 版本，这让我按下了按钮。
所以我仍然需要一个完整的聚合物堆栈来在所有浏览器中拥有 web 组件。<script src="../webcomponentsjs/webcomponents-lite.js"></script><link rel="import" href="../hello-world.html"><hello-world>Hello World Polymer 2.x</hello-world>
有谁知道如何填充 Edge 和 FireFox 以拥有一个真正的 Shadow DOM，而不是假装的原生 Shadow DOM？
这是我尝试过的，但我不知道如何告诉 Edge 和 FireFox 将他们的影子崇拜者放在其他地方并使用 shadydom/shadycss。
https://jsbin.com/quvozo
<!DOCTYPE html>
<html>
<head>
<title>Components</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
</head>
<body>
<hello-world>Hello World ES2015</hello-world>
<script>
function loadScript(src, main) {
return new Promise(function(resolve, reject) {
const script = document.createElement('script');
script.async = true;
script.src = src;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
let polyfilled = false;
const loadPromises = [];
if (!('customElements' in window)) {
loadPromises.push(loadScript('https://raw.githubusercontent.com/webcomponents/custom-elements/master/custom-elements.min.js'));
}
if (!HTMLElement.prototype.attachShadow) {
polyfilled = true
loadPromises.push(loadScript('https://raw.githubusercontent.com/webcomponents/shadydom/master/shadydom.min.js'));
loadPromises.push(loadScript('https://raw.githubusercontent.com/webcomponents/shadycss/master/shadycss.min.js'));
}
Promise.all(loadPromises)
.then(e => console.log(`polyfilled ${polyfilled}`))
.then(e => {
class HelloWorld extends HTMLElement {
constructor() {
super()
this.template = document.createElement('template')
this.template.innerHTML = `
<style>
:host {
display: block;
box-sizing: border-box;
border: 1px solid red;
margin-top: 10px;
padding: 0px 5px;
}
</style>
<p>Test <slot></slot></p>
`
if (polyfilled) ShadyCSS.prepareTemplate(this.template, 'hello-world');
}
connectedCallback() {
const shadowRoot = this.attachShadow({ mode: 'open' })
shadowRoot.appendChild(this.template.content.cloneNode(true))
if (polyfilled) ShadyCSS.applyStyle(this);
}
}
customElements.define('hello-world', HelloWorld)
})
</script>
</body>
</html>最佳答案
constructor() 中的普通 DOM 树中添加元素, 因此，您应该
attach之后的假 Shadow DOM，即在 connectedCallback() 内方法，而不是在 constructor() 中方法。ShadyCSS polyfill 适用于 Edge 和 Firefox。
关于firefox - Shadow DOM v1 CSS polyfill，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40601142/