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我知道它是可能的，因爲聚合物是正在做。我只是想知道，究竟是因爲這篇文章沒有考慮到部分原生影子。謝謝 –