https://developers.google.com/web/fundamentals/getting-started/primers/shadowdomSchatten DOM v1 CSS polyfill
bekam Dieser mich ganz aufgeregt ich meine eigene individuelle Webseite von Grund auf ohne Polymer schreiben konnte.
Nur um herauszufinden, css :host zum Beispiel funktioniert nicht in Edge und FireFox. Ich kann jetzt ohne html import fertig werden, bis w3c herausgefunden hat, was sie mit es6 Modulen machen wollen, aber jeder Browser hat seine eigene halb-implementierte Shadow-DOM-Version, ohne dass css meine Buttons drückt.
Also brauche ich noch einen vollen Polymerstapel, um Webkomponenten in allen Browsern zu haben.
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../hello-world.html">
<hello-world>Hello World Polymer 2.x</hello-world>
Weiß jemand, wie Kanten- und FireFox POLYfill einen eigentlich Schatten DOM zu haben, nicht einen native Schatten DOM, die man sein vorgibt?
Dies ist, was ich versucht habe, aber ich kann nicht herausfinden, wie man Edge und FireFox ihren Shadow Möchtegern woanders hinstellt und den Shadydom/Shadycss benutzt.
<!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>
Dies war eine unterhaltsame Lektüre, danke. Fairerweise sind die Standards (ja, Plural) noch lange nicht ausgereift und Microsoft Edge ist noch relativ neu. Microsoft hat bereits angekündigt, dass [sie Schritte unternehmen werden, um Web-Komponenten zu implementieren] (https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components), aber es wird * * dauert eine Weile. Es hilft nicht, dass Shadow DOM selbst komplett neu geschrieben wurde. Es ist nicht einfach für die Browser-Anbieter. – BoltClock
Ich verstehe und ein Teil von mir ist froh, dass sie ihr Bestes tun, aber meine Frustration beiseite Ich hoffte, jemand könnte mir helfen, die Polyfill shadycss genau von https://github.com/webcomponents zu verwenden Ich weiß, dass es möglich ist, weil Polymer ist es tun. Ich möchte nur wissen, wie genau das ist, weil der Artikel einen teilweise einheimischen Schatten nicht berücksichtigt. Danke –