Question

为什么我要@应用导入的混合，自定义样式标记，这是必需的？

import '@polymer/iron-flex-layout/iron-flex-layout.js';

import {html} from '@polymer/polymer/lib/utils/html-tag.js';

           const template = html`
                <custom-style>
                    <style>
                        body{
                            @apply --layout-vertical;
                            @apply --layout-center;
                        }
                    </style> 
                </custom-style>
            `;

Answer 1

某些浏览器尚未实现Shadow DOM v1规范。为了确保您的应用程序和元素在这些浏览器中正确显示，您需要使用自定义样式，以确保样式信息不会“泄漏”到您元素的本地DOM中。

自定义样式启用了一组填充，以确保您的应用程序和元素中的样式的行为与Shadow DOM v1规范所期望的一致，即使在未实现这些规范的浏览器中也是如此。

为确保您的样式在所有浏览器中均符合Shadow DOM v1规范，请在定义文档级样式时使用自定义样式

更多information：

为什么没有<custom-style> </custom-style>不能@apply导入样式的mixin

1 个答案: