vanilla JS Custom Element for client-side transclusion
Usage
$ npm install embeddable-content
import "embeddable-content";
<embeddable-content>
<a href="/path/to/html">details</a>
</embeddable-content>
<embeddable-content cors>
enables transclusion across origins<embeddable-content replace>
disposes of the<embeddable-content>
wrapper element upon transclusion
There's also a variant for imperatively updating transcluded content via morphdom:
import RefreshableEmbeddableContent from "embeddable-content/refreshable";
customElements.define("embeddable-content", RefreshableEmbeddableContent);
// periodically refresh transclusions
setInterval(_ => {
let nodes = document.querySelectorAll("embeddable-content");
[...nodes].forEach(node => {
node.refresh();
});
}, 60 * 1000);
(note that morhpdom is not included as a dependency of this package)
Contributing
- ensure Node is installed
npm install
downloads dependenciesnpm run compile
performs a one-time compilation, generatingdist/embeddable-content.js
(via faucet-pipeline)npm start
automatically recompiles while monitoring code changesnpm test
checks code for stylistic consistency