将单独的原生 HTML Web 组件对齐到表格或网格中

Question

我有一个数据电子表格（行和列），我正在转换为 Web 组件。使每一列成为一个 Web 组件是有意义的。但是，某些字段可能需要比其他字段更多的垂直空间。我可以设置最大高度并在框中滚动，但我更希望“行”（即每列的第 n 个单元格）具有相同的高度。你如何使它始终显示为网格？

在下面的“单元格”示例中，

A2

和

B2

不垂直对齐，因为它们是独立的。当 web 组件需要跨越多行但保持行对齐时，如何将 webcomponents 插入到

<table>

或

display: grid

元素中？

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; // Prevent initialising twice is item is moved
        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);

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

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

Answer 1

如果我对问题的理解正确，那么您想要的是所有行的高度都相等吗？如果是这样，您只需要将

display: grid

添加到

#CONTAINER

和

:host

中，如下所示：

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; // Prevent initialising twice is item is moved
    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);

#CONTAINER {
  display: grid;
  grid-auto-flow: column;
}

<template id="TEMPLATE">
<style>
    :host {
        border: 1px solid lime;
        display: grid;
    }
    #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>