python (12.9k questions)

javascript (9.2k questions)

reactjs (4.7k questions)

java (4.2k questions)

java (4.2k questions)

c# (3.5k questions)

c# (3.5k questions)

html (3.3k questions)

Questions - web-component

If an event issued on "this" bubbles up out of my component then why do we need the "composed" property on custom events?

So I have read several pieces that say if you want a custom event to traverse the shadow DOM boundary and cross into the light DOM you need to set the custom event's composed property to true. I notic...
test-img

Roger Heathcote

javascript

dom-events

web-component

Votes: 0

Answers: 4

Latest Answer

'this' is the Custom Element/Web Component <my-component>, 'this' is NOT inside the elements shadowRoot. So Events you dispatch from 'this', do not cross shadowDOM boundaries. You only need com...
test-img

Danny &#39;365CSI&#39; Engelman

Nested HTML element not assigning to slot

In the below code I am trying to assign <span slot='test-slot'>b</span> to <slot name='test-slot'>a</slot> but the assignment does not work. If I bring <span slot='test-slot...
test-img

Harry Stuart

javascript

html

web-component

shadow-dom

native-web-component

Votes: 0

Answers: 1

Latest Answer

Named slots only accept top-level children that have a matching slot-attribute. See this (old) Polymer explainer or this more recent article. Edit: Not sure where this is coming from though, the spec ...
test-img

connexo

Native web component: style host differently depending on slotted content

Say I have a native web component with an HTML template like so: <wc-grid> <slot></slot> </wc-grid> Now I have the following two use cases (one with a text input the other...
test-img

run_the_race

web-component

Votes: 0

Answers: 1

Latest Answer

The easiest and cleanest implementation of such a problem I can solve by using a named slot. example of web component class MyComp extends HTMLElement { constructor() { super(); cons...
test-img

Dharmendra Patel

static shadowRootOptions in Litelements with Typescript, set mode to open or close

I'm currently diving into Webcomponents with Litelements: In Webcomponents you can change the way the shadowdom works by defining the mode property as 'open' or 'closed'. Like this in vanilla Javascri...
test-img

Alex

javascript

typescript

web-component

shadow-dom

lit

Votes: 0

Answers: 2

Latest Answer

By default lit element is acting in mode open. So customLitElement.shadowRoot returns a shadow-root. If you want to run it in closed mode set the options as follows: static shadowRootOptions = {...Li...
test-img

Christian

Posts

Questions

Blogs

Jobs