Skip to content

Instantly share code, notes, and snippets.

@knowler

knowler/app.css

Last active December 8, 2021 17:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save knowler/8d570b244de94a305e8a127df9409fd5 to your computer and use it in GitHub Desktop.
Save knowler/8d570b244de94a305e8a127df9409fd5 to your computer and use it in GitHub Desktop.
Download ZIP
Potential future with ES Modules and Web Components (multi-file version)
Raw
app.css
main fancy-article::part(header) {
color: red;
}
aside fancy-article::part(header) {
color: blue;
}
Raw
app.mjs
import {FancyArticle} from 'fancy-article';
window.customElements.define('fancy-article', FancyArticle);
Raw
fancy-article.css
:host {
padding: 1rem;
background-color: #fff;
border-radius: 0.5em;
font-size: 1rem;
}
::slotted([slot="title"]) {
color: #333;
font-weight: 900;
font-size: 2em;
}
Raw
fancy-article.html
<template>
<article>
<article-header part="header">
<slot name="title">TITLE</slot>
</article-header>
<slot name="description">DESCRIPTION</slot>
</article>
</template>
Raw
fancy-article.mjs
import {content} from './fancy-article.html';
import sheet from './fancy-article.css' assert { type: 'css' };
export class FancyArticle extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
// Adopt the stylesheet
this.shadowRoot.adopedStyleSheet = [sheet];
// Use the template
this.shadowRoot.appendChild(document.importNode(content, true));
}
}
Raw
importmap.json
{
"imports": {
"app": "/app.mjs",
"fancy-article": "/fancy-article.mjs"
}
}
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="app.css">
<script type="importmap" src="/importmap.json"></script>
<script async type="module">import 'app';</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