如何将独立原生HTML Web组件对齐为表格或网格布局

我有类电子表格的行列数据，正在转换成Web组件，把每列做成一个Web组件是合理方案，但部分字段需要的垂直空间不一样。我可以设最大高度加滚动，但更希望每行（也就是各列的第n个单元格）高度一致，怎么实现规整的网格显示？在下面的示例里，单元格A2和B2因为相互独立没法垂直对齐，当Web组件需要跨行时，怎么把它们插入<table>或者display: grid元素里还保持行对齐？

解决方案 #

方法1：用CSS Grid容器+Subgrid对齐行高 #

通过容器的Grid布局定义行，让Web组件内部继承网格行规则，自动对齐同一行的单元格高度。

修改后代码

HTML

<template id="TEMPLATE">
<style>
    :host {
        display: grid;
        grid-template-rows: subgrid; /* 继承外部容器的行定义 */
        grid-row: 1 / -1; /* 占满所有行 */
        border: 1px solid lime;
    }
    #TEXTAREA1, #TEXTAREA2 {
        border: 1px solid red;
        display: block;
    }
</style>
<div id="TEXTAREA1"></div>
<div id="TEXTAREA2"></div>
</template>

<div id="CONTAINER">
    <script type="application/json">
        {
            "textarea1": "Cell A1", 
            "textarea2": "Cell A2"
        }
    </script>
    <wc-column></wc-column>
    <script type="application/json">
        {
            "textarea1": "Cell B1 - Long text that overflow and requires extra vertical height because it is so long, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsummmmmmmmmmmmmmmmmmmm, lorem ipsum",
            "textarea2": "Cell B2 - Long text that overflow and requires extra vertical height because it is so long, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsummmmmmmmmmmmmmmmmmmm, lorem ipsum"
        }
    </script>
    <wc-column></wc-column>
</div>

CSS

#CONTAINER {
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* 列数匹配Web组件数量 */
   grid-template-rows: auto auto; /* 两行对应每个列里的两个单元格 */
   gap: 0;
}

说明

• 容器的grid-template-rows会自动根据该行最高单元格的内容计算行高
• Web组件用subgrid继承容器行规则，内部单元格自动对齐到容器网格线，保证同一行高度完全一致

方法2：用HTML Table嵌套Web组件 #

借助表格天然的行高对齐特性，让Web组件适配表格语义，适合需要表格标签语义化的场景。

修改后代码

HTML

<template id="TEMPLATE">
<style>
    :host {
        display: table-cell;
        border: 1px solid lime;
    }
    .row {
        display: table-row;
    }
    #TEXTAREA1, #TEXTAREA2 {
        border: 1px solid red;
        display: table-cell;
        width: 100%;
    }
</style>
<div class="row"><div id="TEXTAREA1"></div></div>
<div class="row"><div id="TEXTAREA2"></div></div>
</template>

<table id="CONTAINER">
    <tr>
        <script type="application/json">
            {
                "textarea1": "Cell A1", 
                "textarea2": "Cell A2"
            }
        </script>
        <wc-column></wc-column>
        <script type="application/json">
            {
                "textarea1": "Cell B1 - Long text that overflow and requires extra vertical height because it is so long, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsummmmmmmmmmmmmmmmmmmm, lorem ipsum",
                "textarea2": "Cell B2 - Long text that overflow and requires extra vertical height because it is so long, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsummmmmmmmmmmmmmmmmmmm, lorem ipsum"
            }
        </script>
        <wc-column></wc-column>
    </tr>
</table>

说明

• Web组件设置display: table-cell，直接作为表格单元格的内容载体
• 表格行高由该行最高单元格决定，天然实现行对齐
• 需要跨行时，直接在Web组件内部的元素上添加rowspan属性即可配合表格语义实现

原问题代码 #

JavaScript #

class Component extends HTMLElement {
    constructor() {
        super().attachShadow({mode:'open'});
        const template = document.getElementById("TEMPLATE");
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
    connectedCallback() {
        if (this.initialised) return; // 防止元素移动时重复初始化
        setTimeout(() => {
            this.initialised = true;
            this.init();
        });
    }
    get(id) {
        return this.shadowRoot.getElementById(id);
    }
    init(required = true) {
        const prev = this.previousElementSibling;
        let props = JSON.parse(prev.textContent);
        this.props = props;
    }
    set props(value) {
        this.get('TEXTAREA1').textContent = value.textarea1;
        this.get('TEXTAREA2').textContent = value.textarea2;
    }
}
window.customElements.define('wc-column', Component);

原CSS #

#CONTAINER {
   display: flex;
   flex-direction: row;
}

原HTML #

<template id="TEMPLATE">
<style>
    :host {
        display: block;
        border: 1px solid lime;
    }
    #TEXTAREA1, #TEXTAREA2 {
        border: 1px solid red;
        display: block;
    }
</style>
<div id="TEXTAREA1"></div>
<div id="TEXTAREA2"></div>
</template>

<div id="CONTAINER">
    <script type="application/json">
        {
            "textarea1": "Cell A1", 
            "textarea2": "Cell A2"
        }
    </script>
    <wc-column></wc-column>
    <script type="application/json">
        {
            "textarea1": "Cell B1 - Long text that overflow and requires extra vertical height because it is so long, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsummmmmmmmmmmmmmmmmmmm, lorem ipsum",
            "textarea2": "Cell B2 - Long text that overflow and requires extra vertical height because it is so long, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsummmmmmmmmmmmmmmmmmmm, lorem ipsum"
        }
    </script>
    <wc-column></wc-column>
</div>

内容的提问来源于stack exchange，提问作者run_the_race