Javascript 外部样式表css在影子dom（HTML Web组件）中不起作用 类菜单项扩展了HtmleElement{ 构造函数（）{ 超级（）； //创建阴影根 设shadow=this.attachShadow（{mode:'open'}）； //在组件中创建所需的标记 让wrapper=document.createElement（'div'）； 设pic=document.createElement（'img'）； 让itemTitle=document.createElement（'h6'）； 让itemDesc=document.createElement（'span'）； 设bCell=document.createElement（'div'）； 让price=document.createElement（'div'）； 让btnWrapper=document.createElement（'div'）； 让btnSlef=document.createElement（'button'）； 设btnTxt=document.createElement（'span'）； //设置样式 this.setAttribute（'class'，'col-lg-4 col-6'）； setAttribute（'class'，'menu item menu grid item'）； pic.setAttribute（'class'，'mb-4'）； setAttribute（'class'，'mb-0'）； setAttribute（'class'，'text mute 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'）； setAttribute（'class'，'btn-btn-outline-secondary-btn-sm'）； //吸着 //log（this.getAttribute（'test'））； 让item_name=this.getAttribute（'item-name'）； 让item_desc=this.getAttribute（'item-desc'）； 让item_price=this.getAttribute（'item-price'）； 让item_img=this.getAttribute（'item-img'）； 函数addCartOnClick（）{ 让curItem={item_name:item_name，item_desc:item_desc，item_price:item_price，item_img:item_img，注意：''}； setItem（“currentItem”，JSON.stringify（curItem））； } //将值放入标记中 itemTitle.innerHTML=项目名称； itemDesc.innerHTML=item_desc； price.innerHTML=“$”+项目价格； pic.setAttribute（'src'，item_img）； btnTxt.innerHTML=“添加到购物车”； btnSlef.addEventListener（“单击”，addCartOnClick）； //格式不动产元素 shadow.appendChild（包装器）； 附加子对象（pic）； appendChild（itemTitle）； appendChild（itemDesc）； appendChild（bCell）； b.追加子项（价格）； b细胞。附属物（btnWrapper）； btnWrapper.appendChild（btnSlef）； btnWrapper.appendChild（btnTxt）； }//构造端 }//班尾 //重新设置自定义标记 自定义元素。定义（'menu-list-item'，MenuListItem）；

上面的代码是我想要定义自定义html标记的地方。每件事都很完美，除了我为它们设置的那些类名的样式不起作用（所有这些类alrady都有来自bootstrap的css代码）。当我把它们写成html代码的时候，它就可以正常工作了

下面是我如何在

Body

HTML中使用它们

<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>

西兰花
牛肉、奶酪、土豆、洋葱、薯条
价格:$9
添加到购物车

这是我的建议

我上面的问题是不知道ShadowDOM的内部，元素看不到容器外部的任何代码。到目前为止，我找到的最佳解决方案是以下代码：

简单地创建一个指向样式表的链接标记，就像我们在普通html中所做的那样

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


shadow.appendChild(linkElem);

---

更新：问题在于costum标签css代码似乎不起作用，即使在html代码中，并且它具有相同的类名，在上面的脚本中，您针对的标记/选择器是什么？

class MenuListItem extensed HTMLElement

是我的costum标记html类，它位于末尾只是不知道为什么css样式代码不应用于我的自定义标记中的那些类