【发布时间】：2017-03-28 19:43:52
【问题描述】：
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
这让我非常兴奋，我可以在没有聚合物的情况下从头开始编写自己的自定义网页。
仅找出 css :host 例如在 Edge 和 FireFox 中不起作用。我现在可以不用 html import 处理，直到 w3c 弄清楚他们想用 es6 模块做什么，但是每个浏览器都有自己的半实现 Shadow DOM 版本，没有 css 正在按下我的按钮。
所以我仍然需要一个完整的聚合物堆栈才能在所有浏览器中拥有 Web 组件。
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../hello-world.html">
<hello-world>Hello World Polymer 2.x</hello-world>
有谁知道如何通过 polyfill Edge 和 FireFox 来拥有一个真正的 Shadow DOM，而不是假装的原生 Shadow DOM？
这是我尝试过的，但我不知道如何告诉 Edge 和 FireFox 将他们的影子崇拜者放在其他地方并使用 shadydom/shadycss。
<!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>【问题讨论】：
-
这是一个有趣的阅读，谢谢。公平地说，标准（是的，复数）还远未成熟，Microsoft Edge 仍然相对较新。微软已经宣布they'll be taking steps to implement web components，但它将需要一段时间。 Shadow DOM 本身一开始就进行了彻底的重写，这于事无补。这对浏览器厂商来说并不容易。
-
我理解并且我的一部分很高兴他们正在尽力而为，但除了我的挫败感之外，我希望有人可以帮助我如何正确使用来自 github.com/webcomponents 的 polyfill shadycss 我知道这是可能的，因为聚合物正在做。我只是想知道究竟是因为这篇文章没有考虑到部分原生 shadow dom。谢谢
标签： firefox microsoft-edge shadow-dom custom-element shady-dom