https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom 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>
有谁知道如何填充 Edge 和 FireFox 来拥有一个真正的 Shadow DOM，而不是一个冒充的原生 Shadow DOM？
这是我尝试过的，但我不知道如何告诉 Edge 和 FireFox 将他们的 Shadow 想要的东西放在其他地方并使用 shadydom/shadycss。
https://jsbin.com/quvozo 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>
- Shadow DOM polyfill 不会创建realShadow DOM 但是normalDOM 元素，
- 自定义元素规范不会允许你 https://html.spec.whatwg.org/multipage/scripting.html#custom-element-conformance添加元素normalDOM 树在
constructor(),
因此，您应该attach the fake之后的 Shadow DOM，即在connectedCallback()方法，而不是内部constructor() method.
ShadyCSS polyfill 在 Edge 和 Firefox 上运行良好。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
