Polymer 3中如何导入仅作用于Shadow DOM的外部样式表？

当然有办法！在Polymer 3里，你可以直接在组件的Shadow DOM模板中导入外部CSS文件，完全适配你用Sass自动生成CSS的场景，具体实现方式如下：

具体代码示例 #

假设你的组件文件是my-app.js，Sass生成的CSS文件是同目录下的style.css，可以这样写：

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

class MyApp extends PolymerElement {
  static get template() {
    return html`
      <!-- 导入外部CSS，仅作用于当前组件的Shadow DOM -->
      <link rel="stylesheet" type="css" href="${new URL('./style.css', import.meta.url)}">
      
      <!-- 组件的内容结构 -->
      <div class="custom-class">
        这是组件内部的内容，样式会受style.css影响
      </div>
    `;
  }
}

customElements.define('my-app', MyApp);

关键细节说明 #

• 路径处理：使用new URL('./style.css', import.meta.url)是为了在ES模块环境中正确解析相对路径，确保无论组件被导入到项目的哪个位置，CSS文件都能被正确加载。
• 作用域限制：因为这个<link>标签是放在组件的Shadow DOM模板内部的，所以加载的CSS只会作用于当前组件的Shadow DOM内容，不会影响外部文档或其他组件的样式，和Polymer 2中dom-module里的<link>效果完全一致。
• 适配Sass工作流：这种方式不需要任何额外的JavaScript动态注入技巧，直接在模板中声明即可，完美匹配你用Sass自动生成CSS文件的需求。

内容的提问来源于stack exchange，提问作者Valentin Sánchez