隱藏和顯示 shadow dom 中的元素

Question

我試圖在 shadow dom 中創建一個搜索欄類型過濾器，如下所示

const root =  mainContainer.attachShadow({ mode: "open" });

      var filter = root.getElementById("myInput"), // search box
          list = root.querySelectorAll(".clubguests-card"); // all list items
          
     
      // (B) ATTACH KEY UP LISTENER TO SEARCH BOX
      filter.onkeyup = () => {
        // (B1) GET CURRENT SEARCH TERM
        let search = filter.value.toLowerCase();
     
        // (B2) LOOP THROUGH LIST ITEMS - ONLY SHOW THOSE THAT MATCH SEARCH
        for (let i of list) {
        
          let item = i.className.toLowerCase();
          console.log(item);
          if (item.indexOf(search) == -1) { i.classList.add("hide"); }
          else { i.classList.remove("hide"); }
        }
    }

控制台顯示類已添加/刪除，但顯示不受影響。

如果我使用 document.querySelectorAll(".clubguests-card") 它工作正常。

有沒有辦法在 shadow dom 中完成這項工作？

Answer 1

因為 shadow dom 元素與外部樣式隔離。

您可以鏈接樣式表或使用可見性屬性來顯示/隱藏陰影元素。

請注意， 繼承的屬性可以 go 通過陰影邊界。

Answer 2

您可以使用:host選擇器訪問主機/自定義元素上的類（和屬性）；
然后在組件內部使用 CSS 屬性來設置詳細的樣式

 <my-component></my-component> <my-component class="hide"></my-component> <my-component class="show"></my-component> <script> customElements.define("my-component",class extends HTMLElement{ constructor(){ super().attachShadow({mode:"open"}).innerHTML = ` <style>:host(.hide){ /* display:none; */ --bgcolor:red; }:host(.show){ --bgcolor:green; } h1{ background: var(--bgcolor,grey); } </style> <h1>Hello Web Component!</h1>` } }) </script>

如果您在問題中包含StackOverflow 片段，我可以將其應用到您的源代碼中。