IMPORTANT: This is a work in progress and subject to major changes until 1.0 release.
Lit-html directive that dynamically binds all native props from a native element with a lit-element component
npm i lit-element-bind-native-props-directive
import { LitElement, html } from 'lit-element';
import { bindNativeProps } from 'lit-element-bind-native-props-directive';
export class BindedInput extends LitElement {
render() {
return html`
<input .="${bindNativeProps({ with: this })}">
`;
}
}
window.customElements.define('binded-input', BindedInput);
<binded-input placeholder="Placeholder"></binded-input>
<binded-input type="button" value="Input Button"></binded-input>
A directive is a function that takes a Part as an argument.
DirectiveFn bindNativeProps( BindNativePropsOpts options );
Binds element's properties with a target element and reflects its attributes.
options
A BindNativePropsInit
object providing options that describe the element with which bind properties and reflect attributes changes.
The BindNativePropsInit
object describes the configuration of bind native props. As such, it's used as the type of the options parameter on the bindNativeProps()
directive.
Name | Type | Default | Description |
---|---|---|---|
with |
LitElement |
undefined |
Target element with which binds element's props |
reflect |
boolean|string[] |
true |
(Optional) A boolean value, determines whether to reflect the attributes changes on the target element or not. An string[] value, determines which attributes are going to be reflected. |
Framework | Status | Issues |
---|---|---|
LitElement |
Implemented | Issues |
React |
Planned | Issues |
Angular |
Planned | Issues |
Vue |
Planned | Issues |