The is attribute ​

In the v0 specification of Web Components was the idea that you could "extend" existing HTML elements. You sometimes find a reference to this in Web Component articles online. It works by passing an extra value to the component definition.

customElements.define('word-count', WordCount, { extends: 'p' })

customElements.define('word-count', WordCount, { extends: 'p' })

Then in your

<div contenteditable>
  <p>lorem ipsum dolor sit amit</p>

  <p is="word-count"></p>
</div>

<div contenteditable>
  <p>lorem ipsum dolor sit amit</p>

  <p is="word-count"></p>
</div>

Example ​

⚠️ The following works only in Chrome.