CODEWITHSUNDEEP
csssizeweb-component
Luke T O'Brien
Luke T O'Brien

Reputation: 2845

Web Component - Sizing

When I create Web Components the default size is 0x0, despite containing elements.
For example here my element is 0x0:

Custom Element width,height = 0,0

But when I hover over the button contained within then you can see the button does have a width and height:

Hovever child element does have size

So my question is how can I make the custom element the same size as the child element?
Why does this happen?
I suspect it is due to the shador DOM and <slot>, but surly there must be a trick to give the custom element the correct height?

Many thanks

Upvotes: 0

Views: 906

Answers (2)

timonweb
timonweb

Reputation: 348

By default, custom elements aren't blocks. You need to explicitly set display: block; property in CSS, like this:

juel-menu {
  display: block;
}

Upvotes: 1

Luke T O&#39;Brien
Luke T O&#39;Brien

Reputation: 2845

I created an example on StackBlitz... The fault was mine, the <slot> is inside an absolutely positioned <div> inside the shadow root... Silly me!

Upvotes: 0

Related Questions