Search code examples
javascripthtmlcssweb-component

:host selector not working for custom element having shadow dom

I am trying to create a custom component with shadow dom attached to it. The custom component gets created and gets added to the dom with shadow dom attached to it but the :host style doesnot get applied

HTML

<html>
  <head></head>
  <body>
    <notify-user>
      <h3 slot='title'>New message in #customer-support</h3>
      <p>This is shadow dom in action</p>
      <button>Reply</button>
    </notify-user>
    <script src='main.js' type="text/javascript"></script>
  </body>
</html>

JS

class Notification extends HTMLElement{
    constructor(){
        super();
    }
    connectedCallback(){
        console.log('notification custom element attached to DOM');
        console.log('this',this);
        let nRoot = this.attachShadow({mode : 'open'});
        nRoot.innerHTML = `
                    <style>
                        :host{
                            background-color : #3498db;
                            border-radius : 5px;
                            line-height: 1.4;
                            width: 25rem;
                        }
                        button {
                            min-width : 5rem;
                            padding: 0.5rem 2rem;
                            margin: 0.2rem;
                            background-color: transparent;
                            border-radius: 2px;
                            border: none;
                            color : white;
                        }
                        p{
                            color : white;
                        }
                    </style>    
                    <div class="wrapper">
                        <button><span>X<span></button>
                        <slot name='title'></slot>
                        <slot></slot>
                        <p>1 minute ago</p>
                    </div>`;

    }
}

customElements.define('notify-user',Notification);

When i am running this is browser style defined for :host does not get applied.

Can anyone please help?

Solution

  • The :host selector is applied here. The issue is, that your host element has no visible content to display.

    An easy fix for this issue could be to set the CSS display setting to 'block', to make the element visible:

    :host {
    background-color: #3498db;
    border-radius: 5px;
    line-height: 1.4;
    width: 25rem;
    display: block;
}