Simple boilerplate for custom elements, using ES6 but without the overhead of polymer.
For details, see the custom elements W3C spec, or some other good posts
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="calcite-web.css">
<script src="item-rating.js"></script>
</head>
<body>
<h1>My Item</h1>
<item-rating id="item-rating" itemid="30e5fe3149c34df1ba922e6f5bbf808f" numratings="5" rating="4.25">
<script>
var rating = document.getElementById('item-rating');
rating.addEventListener('rateitem', function(e) {
console.log('Rate Item:', e.detail.rating);
});
</script>
</body>
</html>npm installnpm start- Declarative API
- Programatic API
- With Backbone
- With Angular 1.0
- With Angular 2.0
- With Ember 2.0
- With Aurelia
- JS API
You may also want to look at the source code for the component or the PDF presentation.
As a rule for maximum compatibility with the largest number of tools you should keep the following standards in mind.
- Always use DOM style event names, all lowercase, with no special characters. This helps keep any kind of event mapping magic (Ember) consistent.
- Each attribute should always have a corresponding getter and getter that matches the attribute name.
- Attributes should always adhere to DOM standards, all lowercase with no special characters. This combined with the above point is essential for Aurelia.
- You should always bubble your custom events. This is necessary for Ember (since it uses event delegation to listen to events) and for components to nest inside each other and listen to events
CustomEventfor IE 9 and 10 - https://github.com/webmodules/custom-event and https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEventdocument.RegisterElement- https://github.com/WebReflection/document-register-element and http://caniuse.com/#feat=custom-elements- Patch
HTMLElementso it can be extended by Babel in Safari - The Babel polyfill
All of these polyfills come out to about 25kb minified and gzipped. Most of that is the Babel polyfill which is 22kb minified and gzipped. You can save 5kb by using the shim from Core JS directly directly and could likely save even more with a custom build.
You can also reduce the needs for polyfills by restricting features (for example using only class, arrow functions and multiline srings) and using loose mode in Babel.
With the required polyfills in place this should work in all modern browsers back to IE 9. However this needs testing.
Currently React 0.13 uses a whitelist of valid HTML attributes so you cannot use non-standard attributes in React. This will be fixed for custom elements with React 0.14. With this change custom elements should work totally out of the box.
Currently in addition to wrapping the custom element as a component you must register any custom events with Ember. Eventually the component restriction will go away with the move to angle bracket components in Ember 2.2, see the RFC and the PR.
The restriction to add custom event to the global registry will still remain. However the author of a proposed event refactoring RFC is interested in removing the requirement.
Works totally out of the box.
Attribute binding works fine out of the box but in order to bind custom events you must write a small custom directive.
Works totally out of the box.
Works totally out of the box, as long as you obey the DOM standards, particularly with regards to properties and attributes. If you want to break standards for more readable attribute names or some other reason you can extend Aurelia's parser to support your use case.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent