Пользовательские веб-компоненты vanilla JavaScript

Question

Есть ли способ передать параметры в пользовательский веб-компонент? Мне нужны параметры для моего компонента. Класс расширен html коллекция.

class CustomDropdown extends HTMLElement{

    constructor(){

        super();

        this.shadow = this.attachShadow({ mode : 'open' });

        this.setAttribute('expanded', there should be some parameter );

    }
}

Answer 1

Обычно, когда вы используете свой пользовательский компонент, вы передаете параметры как атрибуты:

<custom-dropw-down expanded="true"></custom-drop-down>

Затем, в хуке connectedCallback вы можете получить их:

connectedCallback() {
    const isExpanded = this.getAttribute('expanded');
}

Если если вы хотите установить атрибут для отображаемого DOM, вы должны также сделать это после того, как компонент будет визуализирован (например, в хуке connectedCallback):

connectedCallback() {
    this.setAttribute('expanded', 'true');
}