溢出隐藏在浮动子项中无法在 Shadow DOM 中工作 背景问题补充

如何解决溢出隐藏在浮动子项中无法在 Shadow DOM 中工作 背景问题补充

背景

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

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

第三方元素不是基于 Vue 的，而是将我的 <content/> 放入 Shadow DOM / Shadow Root

问题

我面临的问题是我的某些 <content/> 具有浮动元素。通常，overflow:hidden 可以解决项目相互碰撞的问题，如此 Fiddle 所示。但是，当项目被添加到 Shadow DOM 时，这不再起作用。相反，我必须将 overflow:hidden 放在 <component> 级别。

在组件级别放置样式的问题在于它适用于所有类型的不同内容，我不想阻止我拥有的其他内容流到其容器之外。

有没有办法让 overflow:hidden 在 Shadow DOM 中按预期工作？

这是基于上述链接的 MRE，显示它不起作用

_Fiddle

function createShadowParagraphs(root) {
  root.attachShadow({mode: 'open'});
  
  const shadow = root.shadowRoot;
  const div = document.createElement("div");
  div.style.overflow="hidden";
  
  const p = document.createElement("p");
  p.style.float = "left";
  p.innerHTML = `
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
  `;
  
  shadow.appendChild(p);
}

const shadow1 = document.getElementById("shadow1");
const shadow2 = document.getElementById("shadow2");

createShadowParagraphs(shadow1);
createShadowParagraphs(shadow2);

<div style="background:lightgreen">
  <p>This box has content that is floated</p>
  <div id="shadow1"></div>
</div>
<div style="background:lightblue;clear:left;margin-top:100px">
  <p>This box has content that is floated,but its top margin doesn't work</p>
  <div id="shadow2"></div>
</div>
<div>
  <p style="margin-top:50px">The margin on this paragraph does work because overflow hidden on the above box.</p>
</div>

解决方法

我重构了您的代码以尝试了解您想要什么...

但我不明白你想要什么...

<style>
  div { border: 1px dashed green }
</style>
<template>
  <style>
    :host { NOdisplay: inline-block }
    p { border: 2px dashed blue ; float : left }
  </style>
  <p>Hello<br />Hello<br />Hello<br /></p>
</template>
<div style="background:lightgreen">
  <p>This box has content that is floated</p>
  <div id="shadow1"></div>
</div>
<div style="background:lightblue;clear:left;margin-top:100px">
  <p>This box has content that is floated,but its top margin doesn't work</p>
  <div id="shadow2"></div>
</div>
<div>
  <p style="margin-top:50px">The margin on this paragraph does work because overflow hidden on the above box.</p>
</div>
<script>
  function createShadowParagraphs(root) {
    const div = document.createElement("div"); // this div is never used
    div.style.overflow = "hidden";
    const template = document.querySelector("template");
    root.attachShadow({mode: 'open'}) // sets AND returns root.shadowRoot
        .append(template.content.cloneNode(true));
  }
  createShadowParagraphs(shadow1); // IDs are globals,so no need for getElementById
  createShadowParagraphs(shadow2);
</script>

补充

• 在您的（评论）JSFidlle 中，您在这些浮动 Ps 周围添加了一个 DIV
• 我取消了display:inline-block

<style>
  div { border: 1px dashed green }
</style>
<template>
  <style>
    :host { display: inline-block }
    p { border: 2px dashed blue ; float : left }
  </style>
  <div>
    <p>Hello<br />Hello<br />Hello<br /></p>
  </div>
</template>
<div style="background:lightgreen">
  <p>This box has content that is floated</p>
  <div id="shadow1"></div>
</div>
<div style="background:lightblue;clear:left;margin-top:100px">
  <p>This box has content that is floated,so no need for getElementById
  createShadowParagraphs(shadow2);
</script>