Render ShadowDOM on thee server with Declarative Shadow DOM. Parses HTML and recursively inserts user defined templates. The most important part of this would be the template loader. A template loader is an object that defines how the applicator will get the string values for both the html and the css. (css is optional).
import { Applicator. NoopTemplateCache, FileSysTemplateLoader } from '@joist/ssr';
// Define a template caching strategy and a template loader
const applicator = new Applicator(
new NoopTemplateCache(),
new FileSysTemplateLoader(
(tag) => `elements/${tag}/${tag}.html`,
(tag) => `elements/${tag}/${tag}.css`
)
);
// Apply to a document and provide a list of elements to search for
applicator.apply(document, [])
import { Applicator. NoopTemplateCache, FileSysTemplateLoader } from '@joist/ssr';
import { defineConfig } from 'vite';
const applicator = new Applicator(
new NoopTemplateCache(),
new FileSysTemplateLoader(
(tag) => `elements/${tag}/${tag}.html`,
(tag) => `elements/${tag}/${tag}.css`
)
);
export default defineConfig({
plugins: [
{
transformIndexHtml: {
enforce: "pre",
transform(html) {
return applicator.apply(html, ['my-element', 'my-dropdown']);
}
}
}
],
});