使用文档选择器选择自定义元素

Question

我正在用Stenciljs写一个应用，我的自定义元素如下：

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

现在，问题在于通过 document.querySelector() 选择此元素或任何其他删除或添加 hide 属性的可能性。这可以很容易地为标准 HTML 元素完成：

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

如何为我的自定义元素执行此操作？

Answer 1

我通过添加 id 属性得到了想要的结果

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

那么这个组件可以隐藏显示如下：

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

并显示如下：

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