4
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom影子DOM V1 CSS填充工具
这让我兴奋，我可以从头开始编写自己的自定义网页没有聚合物。
只有找出css :host例如在Edge和FireFox中不工作。我现在可以在没有HTML import的情况下处理，直到w3c弄清楚他们想要用es6模块做什么，但是每个浏览器都有自己的一半实现了没有css的Shadow DOM版本正在推送我的按钮。
因此，我仍然需要一个完整的聚合物堆栈以在所有浏览器中拥有webcomponents。
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../hello-world.html">
<hello-world>Hello World Polymer 2.x</hello-world>
有谁知道如何填充工具Edge和火狐有一个居然影子DOM，不是原生阴影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还是比较新的。微软已经宣布[他们将采取措施来实施网络组件]（https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components），但它*将* 需要一段时间。 Shadow DOM本身首先经历了一次完整的重写，这并没有什么帮助。浏览器供应商并不容易。 – BoltClock
我明白，我的一部分很高兴他们尽力而为，但我的挫折一边我希望有人能帮助我如何从https://github.com/webcomponents使用polyfill shadycss corectly我知道它是可能的，因为聚合物是正在做。我只是想知道，究竟是因为这篇文章没有考虑到部分原生影子。谢谢 –