lit-element-bind-native-props-directive

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

Install

npm i lit-element-bind-native-props-directive

Example Usage

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);

Placeholder

<binded-input placeholder="Placeholder"></binded-input>

Type & Value

<binded-input type="button" value="Input Button"></binded-input>

API

Directives

A directive is a function that takes a Part as an argument.

DirectiveFn bindNativeProps( BindNativePropsOpts options );

bindNativeProps()

Binds element's properties with a target element and reflects its attributes.

Parameters

options

A BindNativePropsInit object providing options that describe the element with which bind properties and reflect attributes changes.

Types

BindNativePropsInit

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.

Properties

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.

Integration

Framework	Status	Issues
LitElement	Implemented	Issues
React	Planned	Issues
Angular	Planned	Issues
Vue	Planned	Issues