Question

我想知道是否可以将一个类分配给组件元素本身。

假设我有这个组件：

<html>
  <body>
    <element name="x-preview" constructor="PreviewComponent" extends="div" class="preview">
      <template>
        <div class="preview">

        </div>
      </template>
    </element>
  </body>
</html>

现在我希望能够删除里面的<div class="preview">元素，因为我已经拥有了包裹x-preview div。只需在class="preview"上设置<element>即可。

有可能吗？

Answer 1

您有两个我知道的选项：

1）在任何地方分配课程：

<div is="x-preview" class="preview"></div>

此方法的问题在于，如果更改类名，则必须在使用组件的任何位置更改它。

2）使用inserted生命周期方法将类添加到根元素：

void inserted() {
  getShadowRoot('x-preview').attributes['class'] = 'preview';
}

只要将组件添加到DOM，就会调用

inserted（）。 getShadowRoot（）将获取组件的根元素，然后将类设置为＆＃39; preview＆＃39;。此方法的优点是您只能在一个位置更改类。

如何在组件元素中添加html`class`标签？

1 个答案: