Why don’t we use HTML to author Web Components?

Florian Schulz explores a way to define a web component entirely via markup.

For me, HTML is sort of a component format. So far we’ve used it to define everything that is required for a website to work. But because components are just smaller versions of that, HTML may be a capable format for authoring web components. You don’t need to learn how to write a constructor for a CustomElement and then figure out a way to write your multi-line template as a string or using createElement() all over the place. All you need is your knowledge about HTML as a document format.

The code covered in the technical writeup is all still exploratory, but I do like the fact that it would become as easy as this to load web components:

  <link rel="import" href="custom-search.html">
  <custom-search value="dog food"></custom-search>
  <script src="runtime.js"></script>

(that included runtime.js is a polyfill to make the code work)

The imported custom-search.html file contains all stuff needed for the web component to work:

<body value placeholder>
  <!-- Component Markup: -->
    <!-- … -->

  <!-- Component Styles: -->
    /* &mldr; */

  <!-- Component Logic: -->
    // &mldr;

With this approach, these HTML Components can be opened as a standalone page, directly in the browser. See this color picker for example, which is used in this demo.

So yeah, must say I like this idea 🙂

Why don’t we use HTML to author web components? →
Import CustomElements from HTML files (Technical Writeup) →

As the author notes: In Custom Elements v0 there was a thing called HTML Imports, but those are deprecated and eventually got removed from Chrome in 2020. Don’t know the specific reasoning, so feel free to enlighten me on that part 🙂

Source: Bram Van Damme

November 29, 2021
Category : News
Tags: Elsewhere | Link | web components

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.