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?
