Html 溢出隐藏，浮动子项不在阴影DOM中工作 背景

我在Vue环境中工作，我有一个带插槽的组件，大致如下所示：

<component>
    <third-party-library-element>
        <content />
    </third-party-library-element>
</component>

此框包含浮动的内容

此框包含浮动的内容，但其上边距不起作用

本段的边距确实有效，因为上面的框中隐藏了溢出

我重构了你的代码，试图理解你想要什么

但我不明白你想要什么

div{边框：1px绿色虚线}
：主机{NOdisplay:inline块}
p{边框：2px蓝色虚线；浮动：左}
你好
你好
你好

此框包含浮动的内容

此框包含浮动的内容，但其上边距不起作用

本段的边距确实有效，因为上面的框中隐藏了溢出
函数（根）{
const div=document.createElement（“div”）；//从未使用此div
div.style.overflow=“隐藏”；
const template=document.querySelector（“模板”）；
root.attachShadow（{mode:'open'}）//设置并返回root.shadowRoot
.append（template.content.cloneNode（true））；
}
创建阴影段落（阴影1）；//ID是全局的，所以不需要getElementById
创建阴影段落（阴影2）；

Hi，我的第一个Fiddle链接显示了预期的结束状态。我还看到您正在使用

：host

样式。因为我在主机内部，所以我无法在不影响我使用第三方元素的所有其他地方的情况下瞄准它们；添加了第二个版本，看起来像您的JSFIDLE