@netflix/x-element

  x-element
  _________
 / /__ __\ \
/ / \ \ / \ \
\ \ /_\_\ / /
 \_\_____/_/

A dead simple starting point for custom elements. It provides the following functionality:

• Efficient DOM generation and data binding using your preferred templating engine
• Automatic .property to [attribute] reflection (opt-in)
• Automatic [attribute] to .property synchronization (one-directional, on connected)
• Simple and efficient property observation and computation
• Simple delegated event handling
• Useful error messages

Installation:

Save a local copy to your project:

curl https://raw.githubusercontent.com/Netflix/x-element/main/x-element.js > x-element.js
curl https://raw.githubusercontent.com/Netflix/x-element/main/x-parser.js > x-parser.js
curl https://raw.githubusercontent.com/Netflix/x-element/main/x-template.js > x-template.js

Then import it:

import XElement from '/path/to/x-element.js';

...or load it directly from the web:

import XElement from 'https://deno.land/x/element/x-element.js';

...or use an importmap:

<script type="importmap">
  {
    "imports": {
      "@netflix/x-element": "https://deno.land/x/element/x-element.js"
    }
  }
</script>

Then import it using a bare module specifier...

import XElement from '@netflix/x-element';

...or use a package manager:

npm install @netflix/x-element

Then import it using a bare module specifier...

import XElement from '@netflix/x-element';

Project Philosophy:

• No compilation step is necessary for adoption, just import x-element.js
• Implement a minimal set of generalized functionality
• Make as few design decisions as possible
• Presume adopters are browser experts already (stay out of their way)
• Follow web platform precedents whenever possible
• Remain compatible with any browser which fully supports custom elements
• Prioritize simple syntax and useful comments in the code itself
• Avoid making developers learn new proprietary stuff
• Zero dependencies

Development:

npm install && npm start

Then...

• http://localhost:8080

See SPEC.md for all the deets.