Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

lit-element-bind-native-props-directive

luissardon2MIT License0.0.4TypeScript support: included

Lit-html directive that binds native props from a native element to a lit-element component

readme

lit-element-bind-native-props-directive Published on npm

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

<image src="https://raw.githubusercontent.com/luissardon/lit-html-bind-native-props-directive/ade9fe617b39c87200bbe60317df863e77fbb5f8/images/placeholder.png" width="250" alt="Placeholder" />
<binded-input placeholder="Placeholder"></binded-input>

Type & Value

<image src="https://raw.githubusercontent.com/luissardon/lit-html-bind-native-props-directive/ade9fe617b39c87200bbe60317df863e77fbb5f8/images/type-value.png" width="250" alt="Input & 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