Web 组件 - 大小调整

Question

创建 Web 组件时，尽管包含元素，但默认大小为 0x0。
例如这里我的元素是 0x0:

但是当我将鼠标悬停在其中包含的按钮上时，您可以看到该按钮确实具有宽度和高度：

所以我的问题是如何使自定义元素与子元素大小相同？
为什么会这样？
我怀疑这是由于 shador DOM 和 <slot> 造成的，但一定有技巧可以为自定义元素提供正确的高度？

非常感谢

Answer 1

我创建了 an example on StackBlitz... 是我的错，<slot> 位于绝对定位的 <div> 内部的影子根中...傻我！

Answer 2

默认情况下，自定义元素不是块。您需要在 CSS 中显式设置 display: block; 属性，如下所示：

juel-menu {
  display: block;
}