webcomponents.js Shadow DOM：主机选择器在 Safari 和 Firefox 上不起作用

Question

我尝试使用 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.

Answer 1

GitHub Repository

我把这个和其他片段放在 github 上。随意分叉和改进。

问题是 webcomponets.js 没有 "fix" 在缺乏本机 ShadowDOM 支持的浏览器上使用的样式。也就是说，它不会让浏览器能够理解像 :host.

这样的选择器

Polymer 解决它的方式，is by rewriting the style。

所以，在 Polymer 下，这个：

:host ::content div

变成这样：

x-foo div

因此，要将其置于 VanillaJS 组件下，必须手动执行。

这是我用来创建 Shadow Root 并仅在使用 webcomponents.js 而不是原生 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]");

Here is an example with your code

webcomponents.js Shadow DOM：主机选择器在 Safari 和 Firefox 上不起作用

webcomponents.js Shadow DOM :host selector does not work on Safari and Firefox

html

javascript

css

web-component

shadow-dom

GitHub Repository