Package Exports

@defx/elementary

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@defx/elementary) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@defx/elementary

Web Components for Humans.

Features

Declarative data binding
Factory functions instead of classes
No Shadow DOM
Manually resolved template slots
Pre-render / hydrate

Browser Support

Works in any modern browser that supports JavaScript Proxy.

Install

Using npm:

$ npm i @defx/elementary

Using unpkg CDN:

<script type="module">
  import define from 'https://unpkg.com/@defx/elementary@1.0.0';
</script>

Example

<script type="module">
  import define from 'https://unpkg.com/@defx/elementary@1.0.0';

  let count = 0;

  const factory = ({ expanded = false, title, disabled = false }) => {
    return {
      id: `drawer-${count++}`,
      title,
      expanded,
      disabled,
      toggle() {
        this.expanded = !this.expanded;
      },
    };
  };

  factory.observedAttributes = ['expanded'];

  define('x-drawer', factory);
</script>
<template id="x-drawer">
  <h3>
    <button
      id="{{ id }}"
      disabled="{{ disabled }}"
      aria-expanded="{{ expanded }}"
      onclick="toggle"
    >
      {{ title }}
    </button>
  </h3>
  <div hidden="{{ !expanded }}" aria-labelledby="{{ id }}">
    <slot></slot>
  </div>
</template>