babel-plugin-transform-html-import-to-template

Turn HTML imports into HTMLTemplateElement.

Example

Given the following template.html.

<span>html template 🌞</span>

in

import template from './template.html'
// ...
this.shadowRoot.append(template.content.cloneNode(true))

out

var template = document.createElement(template).innerHTML = '<span>html template 🌞</span>'

Installation

$ yarn add -D babel-plugin-transform-html-import-to-template

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-html-import-to-template"]
}

Via CLI

$ babel --plugins transform-html-import-to-template script.js

Via Node API

import core from 'babel-core'

const plugins = [
    // ...
    'transform-html-import-to-template'
    // ...
]
core.transform(code, { plugins })