Search code examples
javascripthtmlcsstags

Outside stylesheet css not work in the shadow dom (HTML Web Component)

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

the code above is where i would like to define a custom html tag. every thing works perfectly, expect the style for those class name i set them to is not working(all those class alrady have css code for them from bootstrap). when i write them as html code it is work just fine.

a294aeda61ab778ea9ee7dbaaf416bf

And here is how I use them in 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>
Solution
  • Here's some basic about 'Shadow Dom'!

    In a nutshell, Inside of shadow dom, element can't see any code outside of the container. the best soultion i found so far was code below:

    Simplely create a link tag to the style sheet just like what we did in nomal html. whatever the style files you are using, you import them one more time.

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

shadow.appendChild(linkElem);