Как добавить html тэг `class` к элементу компонента?

Мне интересно, возможно ли присвоить класс самому компоненту элемента.

Допустим, у меня есть этот компонент:

<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 дела. Просто настройка class="preview" на <element> не работает

Возможно ли это сделать?

Источник

1 ответ

Решение

У вас есть два варианта, которые мне известны:

1) Назначьте класс везде, где вы его используете:

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

Проблема этого метода заключается в том, что если вы измените имя класса, вам придется менять его везде, где используется компонент.

2) Используйте вставленный метод жизненного цикла, чтобы добавить класс к корневому элементу:

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

insert () будет вызываться всякий раз, когда компонент добавляется в DOM. getShadowRoot() извлечет корневой элемент компонента, а затем установит класс "Предварительный просмотр". Преимущество этого метода в том, что вы меняете класс только в одном месте.

Источник
Другие вопросы по тегам