Discussion on: HTML Imports & Component-Driven Development

View post

Replies for: Thanks, Benny. I suppose what I was getting at is exploring a potential replacement for depending on a server or build tools for this kind of stuff...

There's no need for a server or build tools when using javascript modules

<script type="module">
  import { makeDom } from './my-dom-module.js'
  const someDom = makeDom();
  document.body.append(someDom);
</script>

Easy peasy, lemon squeezy!

TJ Fogarty • Sep 16 '18

Ah ok, cool! Pardon my ignorance here, but how do I get a HTML partial out of the JavaScript module? Can I import HTML?

Benny Powers 🇮🇱🇨🇦 • Sep 16 '18

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 • Sep 16 '18

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 🇮🇱🇨🇦 • Sep 16 '18

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.