What's the fastest way to create shadow DOM?

create it from .innerHTML OR use a reusable <template>

ANALYSIS: <template> is cheaper. When creating a single instance using a template is most always cheaper. When creating many instances of a component, it is always cheaper. That's because paying the parsing cost once. Creating shadow DOM by .innerHTML'ing a string means the string needs to be re-parsed for every instance of the component that's created.

BACKGROUND: Many people want to neglict HTML Imports for defining web components, and instead, use pure JS. An advantage of <template> is that you can declare your component's markup ahead of time, have the browser parse it into DOM, and reuse it over and over again.

( source on github )