如何为聚合物中的所有自定义元素添加相同的 css 类。答案

【问题标题】：How to add same css class to all custom elements in polymer.如何为聚合物中的所有自定义元素添加相同的 css 类。
【发布时间】：2014-07-18 21:13:46
【问题描述】：

我试过了

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

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

【问题讨论】：

您能澄清一下您要做什么吗？您是否正在尝试将 css 类添加到元素的所有实例、其 shadow dom 中的所有元素...？
其shadow dom中的所有元素。

标签： javascript html polymer polyfills

【解决方案1】：

给一个元素的 shadow 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');
  });
}

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

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

【讨论】：

Fwiw，在 Polymer 中，你可以做到 els.array().forEach...
对不起，但我想知道如果我有 10 个差异。自定义元素，我想将相同的 css 应用于所有 10 个差异。自定义元素例如字体颜色比什么？

【解决方案2】：

你考虑过用纯 JS 来做吗？ http://jsfiddle.net/a9V8N/

var elems = document.querySelectorAll('myelement');

for(var i = 0 ; i < elems.length ; i ++){
    elems[i].className += elems[i].className ? ' someClass' : 'someClass';
}

在js中添加类：Add another class to a div with javascript

【讨论】：

为什么不使用elems[i].classList.add('someClass')？
你不能像上面给出的那样给自定义元素的 shadow dom 赋予类。例如，我想在自定义元素的模板中为我的 div 提供类。
this.shadowRoot.querySelectorAll('myelement').array().forEach(function(e) { e.classList.add('someClass'); }) ...尽管几乎可以肯定有更好的方法来实现您所追求的任何效果。 [注：array() 函数是 Polymer 自带的，如果你没有使用 Polymer，可以使用上面的 for 循环]。