Как добавить дочерние элементы в пользовательский элемент в разметке HTML?

Question

Я хочу создать пользовательский элемент, который может содержать любую разметку HTML в пределах:

<my-custom-element>
  <p>This is some message.</p>
  <div><button>Click here</button></div>
</my-custom-element>

Кажется, вышеупомянутая разметка не работает.Каждый браузер отображает его так:

<my-custom-element></my-custom-element>
  <p>This is some message.</p>
  <div><button>Click here</button></div>

Как сделать так, чтобы пользовательский элемент содержал дочерние элементы в разметке?

Answer 1

Если вы используете shadowDOM, вам нужно добавить <slot> в ваш shadowDOM.

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'}).innerHTML = '<style>:host{border:1px dashed red;display:inline-block;}</style><slot></slot>';
  }
}

customElements.define('my-element', MyElement);

<my-element>
  <p>This is some message.</p>
  <div><button>Click here</button></div>
</my-element>