ndf-elements/src/templates/my-live-editor.tpl.html

My collection of useful custom elements.

<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">-->

<template>
  <style>
  :host > .container {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
  }

  @media (min-width: 960px) {
    :host > .container {
      flex-direction: row;
    }
  }

  .container > .pane {
    flex: 49%;
    margin: .5rem 0;
    min-height: 9rem;
  }
  .container > .pane > .inner {
    border: 1px solid #ccc;
    border-radius: .2rem;
    display: block;
    height: calc(100% - 1.3rem);
    max-width: 100vw;
    max-height: 28rem;
    min-height: 8rem;
    padding: .2rem;
  }

  .editor-pane {
    background: #fff;
    line-height: 1.2;
    margin-right: .25rem;
    font: .88rem monospace;
    white-space: pre-wrap;
    word-break: keep-all;
    overflow-wrap: break-word;
    overflow-y: scroll;
  }

  p {
    margin: .75rem 0;
  }
  button, input {
    font: inherit;
    padding: .35rem 1rem;
  }
  </style>

  <div class="container">
    <div class="pane">
      <label id="ed-label">HTML</label>
      <xx-editor class="editor-pane inner" role="textbox" tabindex="0" aria-labelledby="ed-label" aria-multiline="true" spellcheck="false"></xx-editor>
    </div>
    <div class="pane">
      <label id="live-label">Result</label>
      <div class="live-pane inner" role="region" aria-labelledby="live-label"></div>
    </div>
  </div>
</template>