What's the fastest way to create shadow DOM?

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

FIRST INSTANCE

from .innerHTML: 0.400 ms

from <template>: 0.200 ms ✓

CREATING MANY INSTANCES ( 10000 runs ):

from .innerHTML: 0.100 ms

from <template>: 0.000 ms ✓

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 )