如何在Shadow DOM中访问Light DOM插槽内HTML标签并添加链接数据？

你之前的写法有两个核心问题：

• 全局使用document.querySelector("custom-navbar")既冗余又容易出错（多实例场景下会拿到错误元素），自定义元素内部应该用this指代当前实例来查找子元素。
• 直接获取的links属性是字符串格式，必须解析成可遍历的数组才能生成链接。

具体解决步骤： #

1. 修复links属性的JSON格式（可选，也可在代码中处理）
   HTML中的links属性用单引号不符合JSON规范，建议改成双引号：

   <custom-navbar links='[{"title":"home"},{"title":"About"}]' class="bg-purple">
       <!-- 原有内容不变 -->
   </custom-navbar>
   

2. 修改connectedCallback方法
   在自定义元素内部完成解析、查找目标元素、生成链接的逻辑：

   class CustomNavbar extends HTMLElement {
     constructor() {
       super();
       this.attachShadow({ mode: "open" });
       this.shadowRoot.innerHTML = `
           <style>
              :host(.bg-purple){
                   display:flex;
                   width:100%;
                   background-color:purple !important;
              }
              .container{
                   display:flex;
                   flex-direction:row;
                   margin:1rem;
                   align-items:center;
              }
              /* 可以给链接加基础样式 */
              .link-container li {
                   list-style: none;
                   margin-left: 1rem;
                   display: inline-block;
              }
           </style>
           <div class='container'>
                   <div>
                       <slot name="logo"></slot>
                   </div>
                   <slot name='link'></slot>
           </div>
       `;
     }
   
     connectedCallback() {
       // 解析links属性：处理字符串转数组
       const linksStr = this.getAttribute("links");
       let links = [];
       try {
         // 如果HTML里是单引号，就用这行替换解析
         // links = JSON.parse(linksStr.replace(/'/g, '"'));
         links = JSON.parse(linksStr);
       } catch (e) {
         console.error("解析links失败:", e);
         return;
       }
   
       // 获取Light DOM中的ul元素：直接通过this查找子节点
       const linkContainer = this.querySelector(".link-container");
       if (!linkContainer) {
         console.error("未找到目标ul元素");
         return;
       }
   
       // 遍历链接数组，生成li元素并添加到ul
       links.forEach(link => {
         const li = document.createElement("li");
         // 可按需改成a标签形式
         // const a = document.createElement('a');
         // a.href = `/${link.title.toLowerCase()}`;
         // a.textContent = link.title;
         // li.appendChild(a);
         li.textContent = link.title;
         linkContainer.appendChild(li);
       });
     }
   }
   
   customElements.define("custom-navbar", CustomNavbar);
   

关键说明： #

• 用this.querySelector(".link-container")替代全局查找，因为ul是当前custom-navbar元素的Light DOM子节点，属于该实例的管辖范围。
• 必须解析links字符串为数组，否则无法遍历生成链接；如果不想修改HTML的单引号，就用replace(/'/g, '"')统一替换成双引号后再解析。

内容的提问来源于stack exchange，提问作者amir tbi