polymer-3.x - 如何在 polymer 3 预览中使用自定义样式或共享样式

Question

我需要为应用程序使用通用样式，但是 <custom-style>不起作用。属性 include在<style></style>也不起作用。怎么做到的？

Answer 1

编辑:替代方法，使用模板文字。

我意识到有，我的感觉是好多了，多了现在使用模板文字的自然替代方案。

在 shared-styles.js 中:

import { html } from @polymer/polymer/polymer-element.js;

export const sharedStyles = html`
    <style>
        ... various styles here ...
    </style>
`;

现在在您要使用它的自定义元素文件中(my-element.js):

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

class MyElement extends PolymerElement {

    ... element code ...

        get template() {
            return html`
                ${sharedStyles}
                <style>
                    ... your element custom styles here ...
                </style>
            `;
        }

    ... rest of your element code ...

}

对我来说，这更有意义，因为我们使用的是原生 javascript 并且避免 include="" 可能需要的任何额外的 polyfill功能。

我还认为这是 future 的证明，因为 include="" 语法不是真的在规范中，我不希望它会是吗？ (谁能纠正我如果我错了？)

END(替代方法)

下面的旧答案

这已经在 3.0 上线时记录在升级指南中。

请参阅本页“不太常见的升级任务”下的第一部分: https://www.polymer-project.org/3.0/docs/upgrade

此外，请记住，您需要将 custom-style 导入 js 模块才能工作。应位于此处:polymer/lib/elements/custom-style.js