如何在 Javascript 自定义元素中获取元素 ID？

【问题标题】：How to get a Element ID inside a Javascript Custom Element?如何在 Javascript 自定义元素中获取元素 ID？
【发布时间】：2021-08-18 22:03:51
【问题描述】：

我使用本教程在所有页面中重复使用我的导航栏：Reusable HTML Components – FreeCodecamp 简而言之，他将 HTML 放在一个 .JS 文件中，并在带有 <nameOfComponent> </nameOfComponent> 的页面上调用它

但是要调整到移动设备大小，我需要调用这个脚本：

function topNav_resize() {
var x = document.getElementById("myTopnav");
console.log("este é o conteudo da variavel x: " +x)
if (x.className === "topnav") {
 x.className += " responsive";
} else {
 x.className = "topnav";
}
}

但 getElementById 为空

有人知道为什么吗？还是有更好的方法？

这些是我遵循的教程：

How to do a reponsive Topnav w3school

Reuse Header & Footer FreeCodeCamp

【问题讨论】：

最好使用类列表，而不是类名。你什么时候调用函数 myTopnav 在那个时候存在吗？

标签： javascript html reusability code-reuse custom-element

【解决方案1】：

自定义元素创建一个 shadowRoot（又名 shadowDOM）

这意味着document.getElementById("ID") 无法访问 shadowDOM 中的任何元素（将其视为 IFrame）

你可以做document.querySelector("my-element").shadowRoot.getElementById("id")（这是IFrames不能做的）

但是...需要mode:"open"并且这个元素设置mode:"closed"

这意味着“外部”世界根本不允许查询 shadowDOM

closed 根很少使用...因为它完全锁定。

如果您可以访问源代码，请将其重写为：

connectedCallback(){
  this.attachShadow({mode:"open"}).append(headerTemplate.content);
}

为什么没有在constructor做，我不知道

constructor(){
  super().attachShadow({mode:"open"}).append(headerTemplate.content);
}

应该没问题，见：https://dev.to/dannyengelman/web-component-102-the-5-lessons-after-learning-web-components-101-h9p

【讨论】：