CODEWITHSUNDEEP
typescriptstylesweb-componentlit-element
Amparo
Amparo

Reputation: 824

Style does not apply well to nested component

I have two webcomponents (my-section and my-block).

my-section has inside a my-block but the border does not apply well (please, see border red, it is a vertical line with no width).

When I write in the editable div it shows the height of the my-block webcomponent but it is always the same (21px) even if I write several lines. For some reason the parent (my-section) sees the child component (my-block) as a single line. Why?

enter image description here

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>
    `;
  }
}

Upvotes: 0

Views: 304

Answers (1)

Amparo
Amparo

Reputation: 824

from:

static get styles() {
  return css`
    * {
      margin: 20px;
    }
  `;
}

to:

static get styles() {
  return css`
    * {
      margin: 20px;
      display: block;
    }
  `;
}

Upvotes: 1

Related Questions