Стиль плохо применим к вложенному компоненту

У меня есть два веб-компонента (my-section и my-block).

my-section имеет внутри my-block, но граница плохо наносится (пожалуйста, обратите внимание на красную рамку, это вертикальная линия без ширины).

Когда я пишу в редактируемом div, он показывает высоту веб-компонента my-block, но она всегда одинакова (21px), даже если я пишу несколько строк. По какой-то причине родитель (my-section) видит дочерний компонент (my-block) как одну строку. Почему?

import { LitElement, html, css, customElement } from 'lit-element';

@customElement('my-section')
export class Section extends LitElement {
  static get styles() {
    return css`
      * {
        margin: 20px;
      }
    `;
  }

  render() {
    return html`
      <h1>My section</h1>
      <my-block
        style="border: 1px solid tomato;"
        @keyup="${(e: KeyboardEvent) => {
          let el = <HTMLElement>e.target;
          console.log(el.offsetHeight);
        }}"
      ></my-block>
    `;
  }
}

@customElement('my-block')
export class Block extends LitElement {
  render() {
    return html`
      <h2>Block</h2>
      <div contenteditable="true" style="border:1px solid steelblue">
        Lorem ipsum
      </div>
    `;
  }
}