Discussion on: HTML Imports & Component-Driven Development

[Benny Powers 🇮🇱🇨🇦]

Great question, one that's inspired me to write a post on web components standards (watch this space!)

You could do something like

// partial.js
const template = document.createElement('template');

template.innerHTML = `
<div>
  <p>Here's my reusable partial</p>
  <button>OK</button>
</div>
`;

export function partial() {
  return template.content.cloneNode(true)
}

And elsewhere...

import { partial } from './partial.js';
document.getElementById('container').append(partial())

Take a look at the lit-html library for a functional way of building UI with template literals

import { html } from 'lit-html'

const messageBox = message =>
  html`<span class="message-box">${message}</span>`;

const showMessage = message =>
  render(messageBox(message), document.getElementById('container'))

[TJ Fogarty]

Thanks for taking the time to give an explanation, looking forward to your post!

My experiment was to see if I could avoid complicating things with JavaScript, and reduce the barrier to entry for a developer working on styling up the front-end. I'll be interested in seeing how this space grows.

[Benny Powers 🇮🇱🇨🇦]

Yeah, that's exactly what HTML imports were designed for. The loss of that API was a pretty difficult pill to swallow, but the tradeoff is that web components are now standard across almost all browsers.