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 |