Polymer 2.0自定义元素外部样式表不生效，求问题排查

你遇到的样式不生效问题主要有三个核心原因，我来逐一拆解并给出修正方案：

1. 外部样式模块的结构错误 #

你的style-web-app.html里用<template>包裹了<style>，这不符合Polymer共享样式的规范。共享样式的dom-module应该直接包含<style>，不需要额外的<template>层——因为这个模块是用来提供样式，而非渲染HTML内容的。

2. 主元素未正确引用共享样式 #

你只在web-app.html顶部import了样式文件，但没有在自定义元素的模板内明确引入这些样式。Polymer需要通过<style include="样式模块ID">来关联共享样式。

3. CSS选择器语法错误 #

你在:host选择器内部嵌套子元素选择器的写法是无效的（这不是标准CSS或Polymer支持的语法）。要选择自定义元素内部的子元素，应该使用:host #title这种后代选择器的格式。

修正后的样式文件（style-web-app.html） #

<dom-module id="style-web-app">
  <style>
    /* 正确选择宿主元素内的title元素 */
    :host #title {
      font-size: 30px;
      width: 500px;
      color: #FFFFFF;
    }

    :host #header-container, 
    :host #tabs {
      background-color: #01579B;
      display: flex;
      color: #FFFFFF;
    }

    :host #header {
      display: inline-block;
    }
  </style>
</dom-module>

修正后的自定义元素文件（web-app.html） #

<link rel="import" href="../elements/Styles/style-web-app.html">
<dom-module id="web-app">
  <template>
    <!-- 引入共享样式，这里的include值要和样式模块的id一致 -->
    <style include="style-web-app"></style>

    <div id="header-container" class="header-container">
      <div id="logo">
        <img id="Mono" class="logo" src="../img/mono_primary_white_RGB.png" height="75px" width="75px" />
      </div>
      <div id="header">
        <h1 id="title">ICR</h1>
      </div>
    </div>
    <div id="tabs">
      <paper-tabs selected="{{selected}}">
        <paper-tab name="Name">Name</paper-tab>
        <paper-tab name="Type">Type</paper-tab>
        <paper-tab name="Usages">Usages</paper-tab>
      </paper-tabs>
    </div>
  </template>

  <script>
    // 别忘了定义自定义元素类，这是Polymer 2.0元素的必要部分
    class WebApp extends Polymer.Element {
      static get is() { return 'web-app'; }
    }

    customElements.define(WebApp.is, WebApp);
  </script>
</dom-module>

额外提示 #

• 确保你已经正确导入了paper-tabs和paper-tab组件的依赖文件，否则标签页部分也无法正常工作。
• 如果需要更灵活的样式复用，也可以考虑使用CSS变量，在宿主元素上定义变量后，在共享样式中引用。

内容的提问来源于stack exchange，提问作者A P