Question

为了学习围绕Web组件的新概念，我正在使用http://webcomponents.org/提供的polyfill。

我不想使用Polymer，而只使用普通的API。此外，我的目标是至少支持最新版本的Chrome，Firefox和IE。

我正在使用ID为“sdtemplate”的模板创建一个自定义元素“user-profile”，然后将其附加到Shadow DOM中：

<template id="sdtemplate">
      <style>
        p { color: orange; }  
      </style>
      <p>I'm in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p>
    </template>

    <script>
     (function() {

     function searchInImports(selector){
        var links = document.querySelectorAll('link[rel="import"]');
        for(var link in links){
            if(links.hasOwnProperty(link)){
                var results  = links[link].import.querySelectorAll(selector);
                if(results.length > 0){
                    return results;
                }
            }
        }
     }

    var proto = Object.create(HTMLElement.prototype, {
      createdCallback: {
        value: function() {
            var t = searchInImports('#sdtemplate')[0];

            var clone = document.importNode(t.content, true);
            this.createShadowRoot().appendChild(clone);
        }
      }
    });
    document.registerElement('user-profile', {prototype: proto});

元素生成正确，但CSS以不同的方式应用于Chrome中的IE和Firefox。 Chrome正确显示CSS，只有模板中的<p>标签应用CSS（感谢Shadow DOM），但在IE和Firefox中，此CSS泄漏并到达模板外的其他<p>元素。

我尝试将元素名称添加到CSS选择器：

      <style>
        user-profile p { color: orange; }  
      </style>

它适用于IE和Firefox，但不适用于Chrome。

我猜测即使使用polyfill，IE和Firefox也不支持Shadow DOM。

我是否有一种简单的方法可以将Shadow DOM用于支持的浏览器，并为不受支持的浏览器提供后备支持？

Answer 1

填充阴影DOM样式封装意味着重写js中的完整css，这就是为什么polyfill甚至不尝试它。根据{{3}}，这是一个已知的限制。

我是否有一种简单的方法可以使用Shadow DOM进行支持浏览器并为不受支持的浏览器提供后备支持？

我能看到完成此任务的唯一方法是在页面中包含一个小脚本，该脚本可以在所有选择器中添加主机名 iff

style位于模板中，稍后将用于创建阴影根，
阴影dom不是本机支持的。

要完成这两项操作，您只需要查找样式标记是否在影子根目录中。 docs是一个很好的答案，告诉你如何做到这一点。

如何为不支持Shadow DOM的浏览器创建CSS回退？

1 个答案: