chrome CSS var问题

发布于 2022-09-03 07:28:25 字数 1733 浏览 15 评论 0

最近在学自定义组件，遇到了chrome导入css变量问题,
HTML页面代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <script type="text/javascript" src="js/webcomponents.min.js" ></script>
        <script type="text/javascript" src="js/test.js" ></script>
    </head>
    <body>
        <test-widget></test-widget>
    </body>
</html>

通过ES6创建CSS，JS代码如下：

(function(){
    let template = `
        <style>
        @import url("css/test.css");
        .test{
            height: 100px;
            width: 100px;
            color: #fff;
            background-color: var(--main-bg-color,red);
        }
    </style>
    <div class="test1">test1</div>
    <div class="test2">test2</div>
    `;
    
    class TestWidget extends HTMLElement{
        createdCallback(){
            this.createShadowRoot().innerHTML = template;
        };
    }
    document.registerElement('test-widget',TestWidget);
})();

导入的test.css：

:root{
    --main-bg-color: blue;
}
.test2{
    background-color: green;
    height: 100px;
    width: 100px;
    color: #fff;
}

chrome版本51，按理说应该显示的是blue,但是chrome显示red，
如果去掉默认red则默认父元素（就没颜色差别），这是@import导入的问题导致var变量出错吗？
chrome效果图：图片描述

firefox没问题，效果图：图片描述

忘记firefox不支持shadow DOM，所以效果图没对比性，但是chrome js里面还是不能导入外部css variable;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

￡冰雨忧蓝° 2022-09-10 07:28:25

这不是 Shadow DOM 导入外部 CSS 变量的锅，你直接嵌入 test.css 会发现也没有效果。问题在于 :root 选择器在 Shadow DOM 里没有定义，它不匹配 shadow root，也不匹配 shadow host，当然基于样式隔离的原则，更不会匹配文档根。

:root matches neither the shadow root nor the shadow host.
We don't have to extend the meaning of :root here because that is confusing.
参阅：Clarification needed :root CSS pseudo class matches ShadowRoot or not · Issue #338 · w3c/webcomponents

把 :root 改成 :host 选择器，就一切正常。

回复收藏 0

~没有更多了~