在 Shadow DOM 中不工作的浮动子项隐藏的溢出

Question

背景

我在 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，它显示它不工作

_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>

Answer 1

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

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

<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>

加法

• 在您的 (cmets) 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, 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>