Shadow DOM v1 CSS填充 [英] Shadow DOM v1 CSS polyfill
问题描述
https://developers.google.com/web/fundamentals /开始/底漆/阴影
这让我非常兴奋，我可以从头开始写自己的定制网页，没有聚合物。
$ b
只有找到css ：host 例如在Edge和FireFox中不起作用。我现在可以直接使用html import 来处理，直到w3c弄清楚他们想用es6模块做什么，但是每个浏览器都有自己的一半实现了没有css的Shadow DOM版本，按钮。
所以我仍然需要一个完整的聚合物堆栈，以在所有浏览器中都有webcomponents.B
$ b
< script src =../webcomponentsjs/webcomponents-lite.js>< / script>
$ b
< link rel =importhref =../ hello-world.html>
< hello-world> Hello World 2.x< / hello-world>
有谁知道如何polyfill边缘和火狐有一个实际的阴影DOM，而不是一个本地的阴影DOM假装是一个？
这是我的尝试，但我无法弄清楚如何告诉边缘和火狐把他们的阴影wannabe在其他地方，并使用shadydom / shadycss。
< pre class =snippet-code-html ！DOCTYPE html>< html>< head> <标题>元件及LT; /标题> < meta http-equiv =X-UA-Compatiblecontent =IE = edge/> < meta name =viewportcontent =width = device-width，initial-scale = 1.0，minimum-scale = 1.0/>< / head>< body> < hello-world> Hello World ES2015< / hello-world> <脚本>函数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）;}）; }让polyfilled = false; const loadPromises = [];如果（！（'窗口中的'customElements'））{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’））; }（Promote.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如果（polyfilled）ShadyCSS.prepareTemplate（this.template，'hello-world'）;} connectedCallback（< / p>< / style>< p>< / slot>< ）{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，但是正常 DOM元素， 自定义元素规范 rel =nofollow noreferrer>不允许你在 因此，您应该 https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom This got me all excited I could write my own custom webpage from scratch without polymer. Only to find out css So I still need a full polymer stack to have webcomponents in all browsers. Does anybody know how to polyfill Edge and FireFox to have a actually Shadow DOM, not a native Shadow DOM that's pretending to be one? This is what I tried, but I can't figure out how to tell Edge and FireFox to put their Shadow wannabe somewhere else and use the shadydom/shadycss.
Therefore, you should The ShadyCSS polyfill works fine with Edge and Firefox. 这篇关于Shadow DOM v1 CSS填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！构造函数（）中的正常 DOM树中添加元素，
connectedCallback（）方法内，而不是在构造函数（） $ b ShadyCSS polyfill可以在Edge和Firefox中正常工作。:host for example is not working in Edge and FireFox. I can deal without html import for now until w3c figured out what they want to do with es6 modules, but each browser having their own half implemented Shadow DOM version without css is pushing my buttons.<script src="../webcomponentsjs/webcomponents-lite.js"></script><link rel="import" href="../hello-world.html"><hello-world>Hello World Polymer 2.x</hello-world><!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(),attach the fake Shadow DOM afterwards, that is inside the connectedCallback() method, instead of inside the constructor() method.
