https://developers.google.com/web/fundamentals/getting-started/primers/shadowdomShadow DOM v1 CSS polyfill
Это заставило меня все рады, я мог бы написать свой собственный веб-страницу с нуля без полимера.
Только для того, чтобы найти css :host, например, не работает в Edge и FireFox. Я могу обходиться без html import, пока w3c не выяснит, что они хотят делать с модулями es6, но каждый браузер, имеющий собственную половину реализованной версии Shadow DOM без css, нажимает на мои кнопки.
Так что мне все еще нужен полный полимерный стек, чтобы иметь веб-компоненты во всех браузерах.
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../hello-world.html">
<hello-world>Hello World Polymer 2.x</hello-world>
Кто-нибудь знает, как polyfill Эдж и FireFox, чтобы иметь на самом деле Shadow DOM, а не родной Shadow DOM, который притворяется один?
Это то, что я пробовал, но я не могу понять, как сказать Edge и FireFox, чтобы поместить их Shadow wannabe в другое место и использовать 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 по-прежнему относительно нова. Microsoft уже объявила, что [они будут предпринимать шаги для внедрения веб-компонентов] (https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components), но она * будет * занять некоторое время. Это не помогает тому, что сам Shadow DOM прошел полную переписку. Это непросто для поставщиков браузеров. – BoltClock
Я понимаю, и часть меня рада, что они делают все возможное, но мое разочарование в стороне. Я надеялся, что кто-то может помочь мне, как использовать polyfill shadycss прямо из https://github.com/webcomponents. Я знаю, что это возможно, потому что полимер Делать это. Я просто хочу знать, как именно потому, что статья не учитывает частично собственный теневой дом. Спасибо –