Custom web components vanilla JavaScript

Question

Is there any way to pass parameters to the custom web component ? I need parameters for my component . Class is extended html collection.

class CustomDropdown extends HTMLElement{

    constructor(){

        super();

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

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

    }
}

mgarcia · Accepted Answer · 2020-03-30 16:56:53Z

1

Normally, when you use your custom component you pass the parameters as attributes:

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

Then, in the connectedCallback hook you can retrieve them:

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

If you want to set an attribute to the rendered DOM, you should also do that once the component has been rendered (for example, in the connectedCallback hook):

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

answered Mar 30, 2020 at 16:56

mgarcia

6,3863 gold badges23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom web components vanilla JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related