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
CustomElementand 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>
runtime.js is a polyfill to load and run the component)
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.
Self-contained components aye? I like this. A lot. 🙂
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 🙂
Update 2021.11.30: Thanks to reader Steren for pointing to Mozilla’s position on HTML Imports which might explain the deprecation:
So instead of HTML Imports they wanted to pursue implementing HTML Modules, similar to how CSS Modules and JSON Modules work.