I am currently in the process of developing a custom component with shadow dom attached to it. The custom component is successfully created and added to the dom with shadow dom attached, but for some reason, the :host style is not being applied.
HTML
<html>
<head></head>
<body>
<notify-user>
<h3 slot='title'>New message in #customer-support</h3>
<p>This showcases the power of shadow dom</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);
Even after setting up everything as per the code, the browser fails to apply the specified style for :host. Any assistance would be greatly appreciated.
Would anyone be able to help me troubleshoot this issue?