Discussion on: HTML Imports & Component-Driven Development

View post

As discussed, HTML imports have been deprecated in favor of JavaScript modules. New apps should not use them.

There's an early proposal for HTML modules which might interest you.

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, which mimicked an older process I had. HTML Imports came closest to what I was looking for.

I'll read up more on this for sure, thanks for the link!

Benny Powers 🇮🇱🇨🇦 • Sep 16 '18

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.