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 usingcreateElement()
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 🙂