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:

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

(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:

<html>
<head>
  <title>custom-search</title>
</head>
<body value placeholder>
  <!-- Component Markup: -->
  <form>
    <!-- … -->
  </form>

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

  <!-- Component Logic: -->
  <script>
    // &mldr;
  </script>
</body>
</html>

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.