Shadowless slots.
npm install @boulevard/vampireSlots without shadows.
* Installation
* Examples
* API Documentation
* Browser Support
* Caveats
This module is installable through npm.
``
npm install --save @boulevard/vampire
#### Basic Example
This example demonstrates moving content to a nameless slot.
`typescript
const div = Object.assign(document.createElement('div'), {
innerHTML:
Example
};
div.appendChild(document.createTextNode('👻'));
`
The above script will produce the following output.
`html`
Example
👻
#### Example Using LitElement
Slots are most useful when combined with custom elements. This is example shows
how easy it is to use Vampire with LitElement.
`typescript
import '@boulevard/vampire';
import { render } from 'lit-html';
import { customElement, html, LitElement } from 'lit-element';
const WithSlots = (BaseClass: typeof LitElement) => class extends BaseClass {
static render = render;
createRenderRoot() {
return document.createElement('v-root');
}
connectedCallback() {
if (!this.renderRoot.parentElement) {
this.appendChild(this.renderRoot);
}
super.connectedCallback();
}
}
@customElement('x-example')
export class ExampleElement extends WithSlots(LitElement) {
render() {
return html
;
}
}
`Given the following markup.
html
This content will be slotted.
`The above component will produce the following output when rendered.
html
Example
This content will be slotted.
`API Documentation
Vampire is distributed in ES2015 module format.
$3
A
is the root node of a DOM subtree.$3
A
VampireSlot marks the insertion point of foreign content.#### Properties
`typescript
VampireSlot::name: string = '';
`A slot may be given a name so that it can be targeted.
#### Methods
typescript
VampireSlot::assignedElements(options?: {flatten?: boolean}): Element[];
`Returns the elements assigned to this slot. If the
option is set to
true it will return fallback content if, and only if, there is no assigned
content, otherwise it will still return the assigned content.`typescript
VampireSlot::assignedNodes(options?: {flatten?: boolean}): Node[];
`Returns the nodes assigned to this slot. If the
option is set to
true it will return fallback content if, and only if, there is no assigned
content, otherwise it will still return the assigned content.Example
`html
This will be moved to the default slot
This will be moved to the second slot.
`#### Events
typescript
interface ISlotChangeEvent extends CustomEvent {
readonly type = 'v::slotchange';
readonly bubbles = true;
}
`The
event is fired when the slot's assigned content changes.Example
`typescript
slot.addEventListener('v::slotchange', (event: Event) => {
console.log(event.target.assignedNodes());
});
`$3
Allows fallback content to be assigned to a slot.
Example
html
This will be rendered if no content is assigned to this slot.
`Browser Support
The last 2 versions of all modern browsers are supported. In addition, IE 11 is
also supported.
IE 11 requires a custom elements polyfill as well as a
constructor
polyfill.Caveats
* A
VampireRoot cannot be a direct ancestor of a VampireRoot.
* Empty Text nodes will be assign to a slot and will prevent fallback content
from being rendered.
* Fallback content cannot contain more slots.
* IE and Edge do not support display: contents`. If you need to support these