GitHub Repository

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

enter image description here

Answer 1

GitHub Repository

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

问题是webcomponets.js没有“修复”在缺少本机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上不起作用

1 个答案:

GitHub Repository