A class mixin for LitElement that adds <slot> functionality to templates without using the ShadowDOM
npm install @eightshapes/slotify
functionality in templates without requiring the use of ShadowDOM.It's based on the Vampire Slot Library by @daniel-nagy.
```
npm install @eightshapes/slotify --save
In your LitElement Component:
`
import { LitElement, html } from 'lit-element';
import { Slotify } from '@eightshapes/slotify';
export class MyCheeseburger extends Slotify(LitElement) {
render() {
return html
;
}
}customElements.define('my-cheeseburger', MyCheeseburger);
`Then to use the component in HTML:
`
BUN BOTTOM
BUN TOP
Meat, pickles, lettuce, tomato
CHEESE
`Details
Use elements in LitElement templates instead of elements. is a custom element that enables the slot-like functionality via Mutation Observers.Isn't ShadowDOM the future?
Maybe. I have some thoughts on that. If you decide that ShadowDOM is for you at some point in the future, switching from Slotify to ShadowDOM is easy.1. Unwrap the
Slotify mixin from your extends LitElement declaration.
2. Replace all the instances in your template with That's it!
Consumers of your component don't need to change anything, their code will already be compatible with ShadowDOM.