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 …

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>
    /* … */
  </style>

  <!-- Component Logic: -->
  <script>
    // …
  </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 🙂


Print Share Comment Cite Upload Translate
APA
Bramus! | Sciencx (2024-03-28T17:39:07+00:00) » Why don’t we use HTML to author Web Components?. Retrieved from https://www.scien.cx/2021/11/29/why-dont-we-use-html-to-author-web-components/.
MLA
" » Why don’t we use HTML to author Web Components?." Bramus! | Sciencx - Monday November 29, 2021, https://www.scien.cx/2021/11/29/why-dont-we-use-html-to-author-web-components/
HARVARD
Bramus! | Sciencx Monday November 29, 2021 » Why don’t we use HTML to author Web Components?., viewed 2024-03-28T17:39:07+00:00,<https://www.scien.cx/2021/11/29/why-dont-we-use-html-to-author-web-components/>
VANCOUVER
Bramus! | Sciencx - » Why don’t we use HTML to author Web Components?. [Internet]. [Accessed 2024-03-28T17:39:07+00:00]. Available from: https://www.scien.cx/2021/11/29/why-dont-we-use-html-to-author-web-components/
CHICAGO
" » Why don’t we use HTML to author Web Components?." Bramus! | Sciencx - Accessed 2024-03-28T17:39:07+00:00. https://www.scien.cx/2021/11/29/why-dont-we-use-html-to-author-web-components/
IEEE
" » Why don’t we use HTML to author Web Components?." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/11/29/why-dont-we-use-html-to-author-web-components/. [Accessed: 2024-03-28T17:39:07+00:00]
rf:citation
» Why don’t we use HTML to author Web Components? | Bramus! | Sciencx | https://www.scien.cx/2021/11/29/why-dont-we-use-html-to-author-web-components/ | 2024-03-28T17:39:07+00:00
https://github.com/addpipe/simple-recorderjs-demo