Javascript webcomponents.js阴影DOM:主机选择器在Safari和Firefox上不起作用_Javascript_Html_Css_Web Component_Shadow Dom

Javascript webcomponents.js阴影DOM:主机选择器在Safari和Firefox上不起作用

javascript html css

Javascript webcomponents.js阴影DOM:主机选择器在Safari和Firefox上不起作用,javascript,html,css,web-component,shadow-dom,Javascript,Html,Css,Web Component,Shadow Dom,我试着使用来自的polyfill制作自己的web组件这是我的密码： im-list.html <template id="im-list-temp"> <style> :host { list-style-type: none; margin: 0; padding: 0; } </style> <content> </content> </template>

我试着使用来自的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>


：主持人{
列表样式类型：无；
保证金：0；
填充：0；
}
var currentScript=document._currentScript | | document.currentScript；
var proto=Object.create（HtmlListElement.prototype{
createdCallback：{
值：函数（）{
var doc=currentScript.ownerDocument；
var t=文档查询选择器（“im列表临时”）；
var clone=doc.importNode（t.content，true）；
var root=this.createShadowRoot（）；
root.appendChild（克隆）；
}
}
});
文件注册表项（“im-list”{
原型：proto，
扩展：“ul”
});

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中，

只是添加到普通DOM中

我把这个片段和其他片段放在github上。自由地去叉和改进

问题是webcompones.js没有“修复”在缺乏本机ShadowDOM支持的浏览器上使用的样式。也就是说，它不能使浏览器理解诸如

：host

之类的选择器

聚合物解决它的方法

所以，在聚合物下，这个：

:host ::content div

变成这样：

x-foo div

因此，要在VanillaJS组件下实现这一点，需要手动完成

以下是我用来创建阴影根目录并仅在使用webcomponents.js而不是本机阴影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]");

这是可行的，所以我接受了答案，但最终的解决方案是改为聚合物。