Skip to content

Instantly share code, notes, and snippets.

@knowler
Last active Dec 8, 2021
Embed
What would you like to do?
Potential future with ES Modules and Web Components (single HTML-module version)
main fancy-article::part(header) {
color: red;
}
aside fancy-article::part(header) {
color: blue;
}
<template id="fancyArticleTemplate">
<style>
:host {
padding: 1rem;
background-color: #fff;
border-radius: 0.5em;
font-size: 1rem;
}
::slotted([slot="title"]) {
color: #333;
font-weight: 900;
font-size: 2em;
}
</style>
<article>
<article-header part="header">
<slot name="title">TITLE</slot>
</article-header>
<slot name="description">DESCRIPTION</slot>
</article>
</template>
<script type="module">
window.customElements.define('fancy-article', class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(
document.importNode(
import.meta.document.getElementById('fancyArticleTemplate').content,
true,
),
);
}
});
</script>
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="/app.css">
<script type="module" src="/fancy-article.html"></script>
<main>
<fancy-article>
<h1 slot="title">Hello, World!<h1>
<p slot="description">
I am a Web Component.
</p>
</fancy-article>
</main>
<aside>
<fancy-article>
<h2 slot="title">Another Fancy Article<h2>
<p slot="description">
I am another one with a different heading level.
</p>
</fancy-article>
</aside>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment