隐藏在浮动子项中的溢出不在 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 所示。然而，当项目被添加到影子 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>

加法

在您的（评论）JSFidlle 中，您在浮动 Ps
我取消了评论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>

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

Overflow hidden with floated children not working in Shadow DOM

html

css

overflow

css-float

shadow-dom

背景

问题

加法