@astropub/experiments
v0.2.3
Published
A collection of experimental Astro components and tooling.
Downloads
30
Readme
Astro Experiments
A collection of experimental Astro components and tooling.
Usage
---
import Poly from '@astropub/experiments/Poly'
import PolyProxy from '@astropub/experiments/PolyProxy'
import ShadowRoot from '@astropub/experiments/ShadowRoot'
---
---
import { Poly, PolyProxy, ShadowRoot } from '@astropub/experiments'
---
Experiments
Poly
The Poly
component generates any type of element from an as
attribute.
Poly Usage
---
import Poly from '@astropub/experiments/Poly'
---
<Poly as="h1">
<!-- renders within `<h1>` -->
</Poly>
---
import Poly from '@astropub/experiments/Poly'
---
<Poly as="custom-element">
<!-- renders within `<custom-element>` -->
</Poly>
PolyProxy
The PolyProxy
component generates any type of element using dot syntax.
PolyProxy Usage
---
import PolyProxy from '@astropub/experiments/PolyProxy'
---
<PolyProxy.h1>
<!-- renders within `<h1>` -->
</PolyProxy.h1>
---
import PolyProxy from '@astropub/experiments/PolyProxy'
---
<PolyProxy.CustomElement>
<!-- renders within `<custom-element>` -->
</PolyProxy>
ShadowRoot
The ShadowRoot
component generates a <template shadowroot="open">
wrapper.
ShadowRoot Usage
---
import ShadowRoot from '@astropub/experiments/ShadowRoot'
---
<custom-tabs>
<ShadowRoot>
<!-- renders within `<template shadowroot="open">` -->
<!-- anything here renders within an open shadow dom -->
</ShadowRoot>
</custom-tabs>
---
import ShadowRoot from '@astropub/experiments/ShadowRoot'
---
<custom-tabs>
<ShadowRoot closed>
<!-- renders within `<template shadowroot="closed">` -->
<!-- anything here renders within a closed shadow dom -->
</ShadowRoot>
</custom-tabs>
toAstroWebComponent
The toAstroWebComponent
component generates an Astro wrapper for a genuine Web Component.
toAstroWebComponent Usage
---
import toAstroWebComponent from '@astropub/experiments/toAstroWebComponent'
const Heading = toAstroWebComponent(
import.meta.glob('../components/HTMLHeadingElement.js'), import.meta.url
)
---
<Heading>
<!-- renders within `<html-heading>` -->
<!-- or whatever name the component is given from `customElements.define` -->
</Heading>
// ../components/HTMLHeadingElement.js
export default class HTMLHeadingElement extends HTMLElement {
connectedCallback() {
const shadowRoot = this.shadowRoot || this.attachShadow({ mode: 'open' })
const h1 = shadowRoot.firstChild || shadowRoot.appendChild(document.createElement('h1'))
h1.firstChild || h1.appendChild(document.createElement('slot'))
}
}