如何为不支持 Shadow DOM 的浏览器创建 CSS 后备？答案

【问题标题】：How to create a CSS fallback for browsers which don't support Shadow DOM?如何为不支持 Shadow DOM 的浏览器创建 CSS 后备？
【发布时间】：2015-11-24 20:51:47
【问题描述】：

为了学习 Web Components 的新概念，我正在玩 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 用于受支持的浏览器并为不受支持的浏览器提供备用方案？

【问题讨论】：

标签： html css templates web-component shadow-dom

【解决方案1】：

Polyfilling shadow DOM 样式封装意味着在 js 中重写完整的 css，这就是为什么 polyfill 甚至没有尝试它的原因。根据docs，这是一个已知限制。

有没有一种简单的方法可以让我使用 Shadow DOM 来支持浏览器和不支持的浏览器的后备？

我认为实现此目的的唯一方法是在页面中包含一个小脚本，该脚本可以在所有选择器中添加主机名 iff

样式位于模板中，稍后将用于创建影子根，并且
本机不支持shadow dom。

要完成这两个，您只需要确定您的样式标签是否在影子根中。 Here 是一个很好的答案，它告诉你如何做到这一点。

【讨论】：