我尝试使用 https://github.com/webcomponents/webcomponentsjs 中的 polyfill 制作自己的 Web 组件
这是我的代码:
im-list.html
<template id="im-list-temp">
<style>
:host {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<content> </content>
</template>
<script>
var currentScript = document._currentScript || document.currentScript;
var proto = Object.create(HTMLUListElement.prototype, {
createdCallback: {
value: function() {
var doc = currentScript.ownerDocument;
var t = doc.querySelector("#im-list-temp");
var clone = doc.importNode(t.content, true);
var root = this.createShadowRoot();
root.appendChild(clone);
}
}
});
document.registerElement('im-list', {
prototype: proto,
extends: 'ul'
});
</script>
index.html
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="./components/im-list.html" />
<title>List Test</title>
</head>
<body>
<ul is="im-list">
<li>Blubb</li>
<li>Blubb Blubb</li>
</ul>
</body>
</html>
此代码在 Chrome (43.0.2357.81) 中运行良好，但在 Firefox(38.0.1 和 40.0a2)和 Safari (8.0.6) 中不起作用。在 FF 和 Safari 中 <style>只是添加到普通的 DOM 中。
最佳答案
GitHub Repository
我把这个和其他片段放在 github 上。请随意 fork 和改进。
问题是 webcomponets.js 没有“修复”缺乏原生 ShadowDOM 支持的浏览器上使用的样式。也就是说，它不会使浏览器能够理解像 :host 这样的选择器。
Polymer解决这个问题的方式，is by rewriting the style .
所以，在聚合物下，这个:
:host ::content div
变成这样:
x-foo div
因此，要将其放在 VanillaJS 组件下，需要手动执行此操作。
这是我用来创建 Shadow Root 并仅在使用 webcomponents.js 而不是 native Shadow DOM 的浏览器上重写样式的代码片段:
var addShadowRoot = (function () {
'use strict';
var importDoc, shimStyle;
importDoc = (document._currentScript || document.currentScript).ownerDocument;
if (window.ShadowDOMPolyfill) {
shimStyle = document.createElement('style');
document.head.insertBefore(shimStyle, document.head.firstChild);
}
return function (obj, idTemplate, tagName) {
var template, list;
obj.root = obj.createShadowRoot();
template = importDoc.getElementById(idTemplate);
obj.root.appendChild(template.content.cloneNode(true));
if (window.ShadowDOMPolyfill) {
list = obj.root.getElementsByTagName('style');
Array.prototype.forEach.call(list, function (style) {
if (!template.shimmed) {
shimStyle.innerHTML += style.innerHTML
.replace(/:host\b/gm, tagName || idTemplate)
.replace(/::shadow\b/gm, ' ')
.replace(/::content\b/gm, ' ');
}
style.parentNode.removeChild(style);
});
template.shimmed = true;
}
};
}());
将其复制粘贴到您的组件上。
接下来，您需要在 createdCallback 中调用此函数，例如:
addShadowRoot(this, "im-list-temp", "ul[is=im-list]");
关于javascript - webcomponents.js 影子 DOM :host selector does not work on Safari and Firefox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30599628/