javascript - 如何将相同的 css 类添加到 polymer 中的所有自定义元素。

Question

我试过了

<template>
        <link rel="import" href="ele-css.html">
      ......
<template>

还尝试在父元素中添加 css 并继承该元素。

Answer 1

向元素的影子dom中的所有元素添加类与向文档中的所有元素添加类没有什么不同。不同之处在于您在哪个 DOM 树中工作:)

在ready()中，您可以使用this.shadowRoot.querySelectorAll查询元素的影子树:

ready: function() {
  var els = this.shadowRoot.querySelectorAll('*');
  Array.prototype.forEach.call(els, function(el, i) {
    el.classList.add('someClass');
  });
}

我的下一个问题是您为什么要这样做？如果它是为了样式，元素本身的类会更好并且性能更高。然后，您可以将其用作样式钩子(Hook)来为影子 dom 中的元素设置样式。

:host(.someClass) * {
  ...
}