Search code examples
javascripttypescriptstenciljs

Selecting custom element with document selector

I am writing an application in Stenciljs and my custom element is as follows:

<custom-alert alertType="warning" alertId="warningMessage" hide>Be warned</custom-alert>

Now, the issue is with selecting this element via document.querySelector() or any other possibility to remove or add the hide attribute. This can be done for standard HTML elements easily:

document.querySelector('input').removeAttribute('hide');

How can I do this for my custom element?

Solution

  • I was able to get the desired result by adding an id attribute

    <custom-alert id="myCustomAlert" alertType="warning" alertId="warningMessage" >Be warned</custom-alert>

    Then this component can be hidden and shown as follows:

    document.getElementById('myCustomAlert').setAttribute('hidden', 'true');

    And shown as follows:

    document.getElementById('myCustomAlert').removeAttribute('hidden');