Polymer 3预览版自定义/共享样式使用及<custom-style>等失效问题解决

1. 如何使用自定义样式或共享样式？ #

Polymer 3改用ES模块体系，共享样式的实现方式和2.x版本差异很大，核心是通过导出CSS模板字面量来复用样式：

• 第一步：创建共享样式模块
  新建一个JS文件（比如shared-styles.js），用css函数定义样式并导出：

  import { css } from '@polymer/polymer/polymer-element.js';
  
  export const SharedStyles = css`
    .container {
      padding: 16px;
      max-width: 960px;
      margin: 0 auto;
    }
    .highlight {
      color: var(--primary-color, #2196F3);
      font-weight: bold;
    }
  `;
  

• 第二步：在自定义元素中引入并使用
  在你的元素文件里，导入共享样式，然后通过static get styles()方法将共享样式和元素自身的自定义样式合并返回：

  import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
  import { SharedStyles } from './shared-styles.js';
  
  class MyElement extends PolymerElement {
    static get template() {
      return html`
        <div class="container">
          <p class="highlight">这是复用了共享样式的文本</p>
          <p>这是元素专属的自定义样式文本</p>
        </div>
      `;
    }
  
    static get styles() {
      return [
        SharedStyles,
        css`
          p {
            line-height: 1.5;
            margin-bottom: 12px;
          }
        `
      ];
    }
  }
  
  customElements.define('my-element', MyElement);
  

这种方式既实现了样式复用，又符合ES模块的规范，是Polymer 3推荐的做法。

2. <custom-style>和<style include>失效的处理方案 #

Polymer 3彻底抛弃了HTML Imports，所以老版本的<custom-style>和include属性用法自然会失效，下面是替代方案：

针对全局通用样式（原<custom-style>的场景）

你需要把全局样式定义在ES模块中，通过customStyle.define注册，然后在应用入口导入：

• 创建全局样式模块（比如global-styles.js）：

  import { customStyle } from '@polymer/polymer/lib/custom-style.js';
  import { css } from '@polymer/polymer/polymer-element.js';
  
  customStyle.define('global-styles', css`
    :host {
      --primary-color: #2196F3;
      --secondary-color: #FFC107;
    }
    body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background-color: #f5f5f5;
    }
  `);
  

• 在应用入口文件（比如index.js）导入这个模块：

  import './global-styles.js';
  import './my-element.js';
  

  这样全局样式就会生效，无需在HTML中写<custom-style>标签。

针对<style include="xxx">失效的场景

include属性在Polymer 3中已经被废弃，完全可以用上面第一点提到的共享样式导入+合并的方式替代——导入对应的CSS模板，然后在static get styles()数组中包含它，就实现了原include的复用效果。

另外要注意：确保你安装的是正确的Polymer 3预览版依赖，所有导入路径都是ES模块的相对路径，不要混用HTML Imports的写法。

内容的提问来源于stack exchange，提问作者Bogdan Poslovsky