外部样式表 css 在影子 dom 中不起作用（HTML Web 组件）

Question

        class MenuListItem extends HTMLElement{
    constructor(){
        super();
        //create a shadow root
        let shadow = this.attachShadow({mode:'open'});
        //create tags we need in the component
        let wrapper = document.createElement('div');
        let pic = document.createElement('img');
        let itemTitle = document.createElement('h6');
        let itemDesc = document.createElement('span');
        let bCell = document.createElement('div');
        let price = document.createElement('div');
        let btnWrapper = document.createElement('div');
        let btnSlef = document.createElement('button');
        let btnTxt = document.createElement('span');
        
        //set style
        this.setAttribute('class', 'col-lg-4 col-6');
        wrapper.setAttribute('class', 'menu-item menu-grid-item');
        pic.setAttribute('class','mb-4');
        itemTitle.setAttribute('class','mb-0');
        itemDesc.setAttribute('class', 'text-muted text-sm');
        bCell.setAttribute('class', 'row align-items-center mt-4');
        price.setAttribute('class', 'col-sm-6');
        btnWrapper.setAttribute('class', 'col-sm-6 text-sm-right mt-2 mt-sm-0');
        btnSlef.setAttribute('class', 'btn btn-outline-secondary btn-sm');
        

        
        //get attrubite
        //console.log(this.getAttribute('test'));
        let item_name = this.getAttribute('item-name');
        let item_desc = this.getAttribute('item-desc');
        let item_price = this.getAttribute('item-price');
        let item_img = this.getAttribute('item-img');
        
        function addCartOnClick(){
            let curItem = {item_name: item_name, item_desc:item_desc, item_price:item_price, item_img:item_img, note: ''};
            window.localStorage.setItem("currentItem", JSON.stringify(curItem));
        }
        
        
        //put value in to the tags
        itemTitle.innerHTML = item_name;
        itemDesc.innerHTML = item_desc;
        price.innerHTML = '$ ' + item_price;
        pic.setAttribute('src', item_img);
        btnTxt.innerHTML = "Add To Cart";
        btnSlef.addEventListener("click", addCartOnClick);


        //format realte elements
        shadow.appendChild(wrapper);
        wrapper.appendChild(pic);
        wrapper.appendChild(itemTitle);
        wrapper.appendChild(itemDesc);
        wrapper.appendChild(bCell);
        bCell.appendChild(price);
        bCell.appendChild(btnWrapper);
        btnWrapper.appendChild(btnSlef);
        btnWrapper.appendChild(btnTxt);
    }//constructor end
}//class end 

//regsiter the custom tags
customElements.define('menu-list-item', MenuListItem);

上面的代码是我想定义自定义 html 标签的地方。一切都很完美，预计我设置的那些类名的样式不起作用（所有这些类 alrady 都有来自 bootstrap 的 css 代码）。当我将它们写为 html 代码时，它工作得很好。

这是我在BodyHTML中使用它们的方法

<menu-list-item
item-name="Test Food" 
item-desc="Beef, cheese, potato, onion, fries"
item-price="9.00"
item-img="assets/img/products/product-burger.jpg"
style="display: block;"
></menu-list-item>
<div class="col-lg-4 col-6">
    <!-- Menu Item -->
    <div class="menu-item menu-grid-item">
        <img class="mb-4" src="assets/img/products/product-pizza.jpg" >
        <h6 class="mb-0">Broccoli</h6>
        <span class="text-muted text-sm">Beef, cheese, potato, onion, fries</span>
        <div class="row align-items-center mt-4">
            <div class="col-sm-6">Price: $9.00</div>
            <div class="col-sm-6 text-sm-right mt-2 mt-sm-0"><button class="btn btn-outline-secondary btn-sm" data-target="#productModal" data-toggle="modal"><span>Add to cart</span></button></div>
        </div>
    </div>

Answer 1

这是关于“Shadow Dom”的一些基本知识！

简而言之，在shadow dom内部，element看不到容器外部的任何代码。到目前为止我发现的最好的灵魂是下面的代码：

简单地创建一个指向样式表的链接标记，就像我们在普通 html 中所做的那样。无论您使用什么样式文件，您都可以再次导入它们。

const linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'style.css');

shadow.appendChild(linkElem);