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

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

我使用本教程在所有页面中重复使用我的导航栏：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

解决方法

我不知道在哪里使用你的函数，它是监听器还是其他地方，但你可以在代码中使用 classList Toggle，就像那样

<div id="myTopnav"></div>
<button id="btn"></button>

//Calling your x in DOM
var x = document.getElementById('myTopnav');
//Calling button in DOM
var btn = document.getElementById('btn');

//Wrinting Eventlistner for button
function topNav_resize(){

//if else statement is not necessary toggle method automatically understands
 when it should remove and when add
x.classList.toggle("responsive")
}

//And After that we give this function a button 
btn.addEventListener('click',topNav_resize )

您也可以自行检查JSFIDDLE

自定义元素创建一个 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