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

let shadow = elementRef.attachShadow({mode: 'open'});

let shadow = elementRef.attachShadow({mode: 'closed'});

<template id="my-paragraph">
  <p>My paragraph</p>
</template>

let template = document.getElementById('my-paragraph');
let templateContent = template.content;

document.body.appendChild(templateContent);

<template>
  <p>
    <slot name="my-text">My default text</slot>
  </p>
</template>

<my-paragraph>
  <span slot="my-text">
    Let's have some different text!
  </span>
</my-paragraph>

class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});
    
    // write element functionality in here

    ...
  }
}

customElements.define('popup-info', PopUpInfo);

<div>
  <popup-info></popup-info>
</div>

// Create spans
var wrapper = document.createElement('span');
wrapper.setAttribute('class','wrapper');
var icon = document.createElement('span');
icon.setAttribute('class','icon');
icon.setAttribute('tabindex', 0);
var info = document.createElement('span');
info.setAttribute('class','info');

// Take attribute content and put it inside the span
var text = this.getAttribute('text');
info.textContent = text;

// Insert icon
var imgUrl;
if(this.hasAttribute('img')) {
  imgUrl = this.getAttribute('img');
} else {
  imgUrl = 'img/default.png';
}
var img = document.createElement('img');
img.src = imgUrl;
icon.appendChild(img);

// Create some CSS to apply to the shadow dom
var style = document.createElement('style');

style.textContent = '.wrapper {' +
// CSS truncated for brevity

// attach the created elements to the shadow dom

shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(icon);
wrapper.appendChild(info);

 render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }

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

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

<simple-greeting name="Everyone"></simple-greeting>

import { Component, Prop, h }
  from '@stencil/core';

@Component({
  tag: 'my-first-component',
})
export class MyComponent {
  @Prop() name: string;

  render() {
    return (
      <p>
        My name is {this.name}
      </p>
    );
  }
}

<my-first-component name="Max"></my-first-component>