开槽项目未填充 Safari 中容器的高度

问题描述

我正在尝试让插槽项目填充 Safari 中的父容器。 以下内容适用于 Chrome、FF，甚至 Edge-Chromium，但不适用于 Safari。 我只能修改插槽项目的内容和样式，而不能修改插槽的容器（即我可以修改 .c-name，但不能修改用户卡）

customElements.define( "user-card",class extends HTMLElement {
    
    connectedCallback() {
      const randomHeight = 
            (Math.random() * 400 + 200)<<0;
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `
      <style>
        .card {
          display: flex;
          flex-direction: column;
          height: ${randomHeight}px;
        }
        .card > div {
          flex: auto;
          border: 1px solid blue;
        }
        
      </style>
      <span>Height: ${randomHeight}px</span>
      <div class="card">
        <div class="card-header">Head</div>
        <div class="card-content"><slot /></div>
        <div class="card-footer">Foot</div>
      </div>
    `;
    }
  }
);

.c-name {
  background: black;
  color: white;
  height: 100%;
}

<user-card>
  <div class="c-name">
    <span>John Smith</span>
  </div>
</user-card>

解决方法

目前还不清楚您要完成的任务。您的 .c-name 不是 .card div 的一部分。你最好只发布没有任何组件的 HTML、CSS 和 JS，这样更容易调试。我做了一个在 Safari 中有效的例子，但你的代码仍然不是很清楚，所以很难给你正确的答案。

这是您的代码在开发工具中的外观：

.card {
  display: flex;
  flex-direction: column;
  height: 467px;
}
.card > div {
  flex: auto;
  border: 1px solid blue;
}

.card-content {
  background: red;
}

<div class="card">
  <div class="card-header">Head</div>
  <div class="card-content"><slot /></div>
  <div class="card-footer">Foot</div>
</div>

,

不幸的是，这似乎是 Safari 中的一个错误 - 它已在最新的技术预览 (122) 中得到修复。