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

Question

为了学习有关 Web 组件的新概念，我正在使用 http://webcomponents.org/ 提供的 polyfills .

我不想使用 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 应用于 IE 和 Firefox 的方式与 Chrome 不同。 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

Polyfilling shadow DOM 样式封装意味着在 js 中重写完整的 css，所以 polyfill 甚至不尝试它。根据 docs这是一个已知的限制。

Is there an easy way for me to use the Shadow DOM for supported browsers and have a fallback for unsupported browsers?

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

1. style 位于模板中，稍后将用于创建影子根，并且
2. shadow dom 不受原生支持。

要完成这两个操作，您只需要查找您的样式标签是否在影子根内。 Here是一个很好的答案，告诉您如何做到这一点。