Writes attribute values to the DOM for a group of AttributeParts bound to a single attribute. The value is only set once even if there are multiple parts for an attribute.
Commits the current part value, causing it to actually be written to the DOM.
Details
Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.
Commits the current part value, causing it to actually be written to the DOM.
Details
Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.
Brands a function as a directive factory function so that lit-html will call the function during template rendering, rather than passing as a value.
Import
import { directive } from'lit-html';
Signature
directive(f): F
Parameters
f
F
The directive factory function. Must be a function that returns a function of the signature (part: Part) => void. The returned function will be called with the part object.
Details
A directive is a function that takes a Part as an argument. It has the signature: (part: Part) => void.
A directive factory is a function that takes arguments for data and configuration and returns a directive. Users of directive usually refer to the directive factory as the directive. For example, "The repeat directive".
Usually a template author will invoke a directive factory in their template with relevant arguments, which will then return a directive function.
Here's an example of using the repeat() directive factory that takes an array and a function to render an item:
When repeat is invoked, it returns a directive function that closes over items and the template function. When the outer template is rendered, the return directive function is called with the Part for the expression. repeat then performs it's custom logic to render multiple items.
Commits the current part value, causing it to actually be written to the DOM.
Details
Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.
A Part that controls a location within a Node tree. Like a Range, NodePart has start and end locations and can set and update the Nodes between those locations.
Import
import { NodePart } from'lit-html';
Details
NodeParts support several value types: primitives, Nodes, TemplateResults, as well as arrays and iterables of those types.
Commits the current part value, causing it to actually be written to the DOM.
Details
Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.
Inserts this part after the ref node (between ref and ref's next sibling). Both ref and its next sibling must be static, unchanging nodes such as those that appear in a literal section of a template.
Parameters
ref
Node
Details
This part must be empty, as its contents are not automatically moved.
Sets attribute values for PropertyParts, so that the value is only set once even if there are multiple parts for a property.
Import
import { PropertyCommitter } from'lit-html';
Details
If an expression controls the whole property value, then the value is simply assigned to the property under control. If there are string literals or multiple expressions, then the strings are expressions are interpolated into a string first.
Commits the current part value, causing it to actually be written to the DOM.
Details
Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.
Reparents nodes, starting from start (inclusive) to end (exclusive), into another container (could be the same container), before before. If before is null, it appends the nodes to the container.
Commits the current part value, causing it to actually be written to the DOM.
Details
Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.
The attribute name, including a possible prefix. The name may be prefixed by . (for a property binding), @ (for an event binding) or ? (for a boolean attribute binding).
strings
ReadonlyArray<string>
The array of literal strings that form the static part of the attribute value. There are always at least two strings, even for fully-controlled bindings with a single expression. For example, for the binding attr="${e1}-${e2}", the strings array includes three strings (['', '-', ''])—the text before the first expression (the empty string), the text between the two expressions ('-'), and the text after the last expression (another empty string).