首页 文章

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

提问于
浏览 次
0

为了学习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用于支持的浏览器，并为不支持的浏览器提供后备支持？

html css templates web-component shadow-dom

1 回答

  • 1

    Polyfilling shadow DOM样式封装意味着重写js中的完整css，即使尝试它也是如此 . 根据docs，这是一个已知的限制 .

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

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

    • style位于模板中，稍后将用于创建阴影根，以及

    • shadow dom不是本机支持的 .

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

    回复于

相关问题