Ciugk

Clash Royale CLAN TAG #URR8PPP webcomponents - hide dropdown menu on window.onclick dropdown menu is created in shadowDOM almost perfect, but the problem is how to hide the dropdown menu when click on any where else in window class NavComponent extends HTMLElement { constructor() { super(); let template = document.currentScript.ownerDocument.querySelector('template'); let clone = document.importNode(template.content, true); let root = this.attachShadow({ mode: 'open' }); root.appendChild(clone); } connectedCallback() { let ddc = this.shadowRoot.querySelectorAll('.dropdowncontainer') let dd = this.shadowRoot.querySelectorAll('.dropdown'); let ddc_length = ddc.length for (let index = 0; index < ddc_length; index++) { ddc[index].addEventListener('click', e => { dd[index].classList.toggle('show'); }); } ...

Clash Royale CLAN TAG #URR8PPP Is there a way to style a webcomponent based on the container it's in? I'm trying to write some webcomponents that respond to a theme for the container they're in. I.e. <div dataset-theme='light'> <my-custom-element></my-custom-element> </div> <div dataset-theme='dark'> <my-custom-element></my-custom-element> </div> I'd like the background color of the one in the dark theme to change to a dark color. I've tried CSS like the following inside of my shadow-root: [dataset-theme='dark'] :host background-color: #333 But it doesn't seem to respond to that at all. Is there a way for the style of a webcomponent to change based on the container it's in? Have you tried [dataset-theme='dark'] my-custom-element{background-color: #333} ? – Justinas Jul 18 at 7:09 ...