Skip to content

Instantly share code, notes, and snippets.

@YoungElPaso

YoungElPaso/index.html

Created March 23, 2025 04:03
Show Gist options
  • Save YoungElPaso/dca517c84c2079bc1ac5f4504ef258a4 to your computer and use it in GitHub Desktop.
Save YoungElPaso/dca517c84c2079bc1ac5f4504ef258a4 to your computer and use it in GitHub Desktop.
Download ZIP
Some Custom Elements for Blog?
Raw
index.html
<style>
:root {
--dark-gray: #333;
--light-gray: #EEE;
--text-size: 1rem;
--space: .25rem;
--font-family: Sans-serif;
--accent-font-family: Serif;
}
body {
/* Default dark theme. */
--body-bg: var(--dark-gray);
--body-text-color: var(--light-gray);
--body-text-size: var(--text-size);
--medium-text-size: calc(2*(var(--text-size)));
--large-text-size: calc(3*(var(--text-size)));
--body-font-family: var(--font-family);
background: var(--body-bg);
font-size: var(--body-text-size);
font-family: var(--body-font-family);
color: var(--body-text-color);
}
site-header {
display: block;
padding: calc(4*var(--space));
}
h1 {
font-family: var(--accent-font-family);
font-size: var(--header-text-size, --large-text-size);
font-weight: normal;
}
site-header h1 {
--header-text-size: var(--large-text-size);
}
site-header nav {
padding: calc(4*var(--space));
background: hotpink;
}
</style>
<body>
<site-header>
<h1>
Welcome
</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/now">Now</a>
<a href="/blog">Blog</a>
</nav>
</site-header>
<blog-post-summary>
<template shadowrootmode="open">
<style>
h1 {
--header-text-size: --medium-text-size;
}
</style>
<h1>
<slot name="header"></slot>
</h1>
<section>
<slot name="post-summary"></slot>
</section>
</template>
<h1 slot="header">This is a post</h1>
<section slot="post-summary">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quibusdam provident autem corporis ratione cupiditate officia illo veniam blanditiis voluptates impedit odit excepturi, quia accusantium, officiis consequuntur, id cumque eveniet!</p>
</section>
</blog-post-summary>
</body>
Raw
script.js
(function attachShadowRoots(root) {
root.querySelectorAll("template[shadowrootmode]").forEach((template) => {
const mode = template.getAttribute("shadowrootmode");
const shadowRoot = template.parentNode.attachShadow({ mode });
shadowRoot.appendChild(template.content);
template.remove();
attachShadowRoots(shadowRoot);
});
})(document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment