在 Polymer 3 中使用共享样式模块的正确方法答案

【问题标题】：Correct way to use shared style modules in Polymer 3在 Polymer 3 中使用共享样式模块的正确方法
【发布时间】：2019-08-02 13:34:17
【问题描述】：

在我的项目中，我想使用共享样式，但不知道如何为 IE11 和 Edge 正确编写它。

我正在使用带有 JS 导入的聚合物 3，此解决方案适用于 Google Chrome，但在 IE11/Edge 中不起作用或部分起作用。

现在我有common-styles.js

const styleElementCommon = document.createElement('dom-module');

styleElementCommon.innerHTML = `
    <template>
        <style>
            :host > * {
                --black: #000;
                --white: #fff;
                --blue: #2862a1;
            }
            :host * {  
                box-sizing: border-box;
            }
        </style>
    </template>
`;
styleElementCommon.register('common-styles');

然后我有一个layout-styles.js，它继承自common-styles.js

import './common-styles';

const styleElementLayout = document.createElement('dom-module');

styleElementLayout.innerHTML = `
    <template>
        <style include="common-styles">
            :host > * {
                --headerHeight: 120px;
                --footerHeight: 60px;

                --sidebarWidth: 100vw;
                --sideMenuWidth: 100vw;
        </style>
    </template>
`;
styleElementLayout.register('layout-styles');

然后，我有一个header-layout.js，它有自己的样式和共享的样式。

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '../../styles/layout-styles';

const template = html`
    <style include="layout-styles">
        header {
            height: var(--headerHeight);
        }
        header.background-blue {
            background: var(--blue);
        }
    </style>
    <header class="background-blue">
        <slot></slot>
    </header>
`;

class HeaderLayout extends PolymerElement {
    static get is() {
        return 'header-layout';
    }

    static get properties() {
        return {}
    }

    static get template() {
        return template;
    }
}

window.customElements.define('header-layout', HeaderLayout);

我的逻辑如下。 header-layout.js 包括layout-styles.js 和layout-styles.js 包括common-styles.js。

结果是header-layout.js 可以访问布局和常用样式中的所有变量。

这适用于除 Edge 和 IE11 之外的任何地方。在 Edge 中只能访问布局样式中的变量，而 IE11 不能全部工作。

当我从常见和布局样式中删除 include 属性时。 IE11 像以前的 Edge 一样工作 - 只有布局样式中的变量

跨浏览器共享更多组件样式的正确方法是什么？

【问题讨论】：

标签： css polymer internet-explorer-11 microsoft-edge polymer-3.x

【解决方案1】：

从Polymer document 开始，Polymer 3.0 已经从 HTML 导入转移到 ES6 模块，从 Bower 转移到 npm。 Polymer 使用的某些功能（尚未）在所有浏览器中都原生支持，我们需要使用Polyfills。

此外，您可以检查您的浏览器版本和Polymer Browser Support document。我已经在我身边测试了this sample。它适用于 Microsoft Edge 44 版本，但不适用于 IE 浏览器。由于此问题与 Polymer 有关，建议您将问题发布到 Polymer forum。

【讨论】：