j-elements
Proof-of-concept and prototype web components to fill in some gaps in the Vaadin components collection
APACHE-2.0 License
Bot releases are visible (Hide)
Breaking changes
TeleportingElement
This utility is deprecated. Consider using PortalElement instead, which is an iteration on the same concept but with less limitations.
No Internet Explorer 11 and pre-Chromium Edge support
The components and utilities no longer work in browsers without native Shadow DOM and CSS Custom Properties support.
StylableMixin
<style type="scoped" for="j-button"></style> -> <style media="j-button"></style>
Style elements in the global scope affect all matching element instances in any shadow root. There is no distinction about “scoped” or ”global” style sheets in the global scope.
New features
JInput
New component JInput, which is based on two new utility classes: NativeElementWrapper and NativeInputElementWrapper.
JButton is now also based on NativeElementWrapper, and therefore now has a shadow root as well (and no longer uses LightStyleElement).
PortalElement
Replaces the previous TeleportingElement experiment. PortalElement has less limitations.
Changes
JField
JField got a major refactoring. It now uses the browser’s built-in validation features more (such as localized validation messages).
MutationAnimationMixin
A new utility for easily animating element additions and removals from the DOM.
Docs for MutationAnimationMixin ›
Docs site
- Various improvements
Folder structure
- Components moved under
src/components - Utilities moved under
src/util
Published by jouni about 6 years ago
Complete rewrite of the whole project
The project is no longer just about creating new web components to fill in the gaps for Vaadin web components. The scope has now increased to include more research and prototyping for web components in general.
Vanilla JS, ES6 modules
The components are no longer based on Polymer 2 – they are now standard JavaScript. There are no extra dependencies for the reusable code in the project, and they are now packaged as ES6 modules instead of HTML imports.
The components have not been properly tested on other browsers than Chrome, Firefox and Safari.
npm
Publishing is now handled through npm instead of Bower. This may change in later releases if I figure out a way to automatically convert the ES modules to HTML imports (the opposite of what Polymer Modulizer does).
Online docs and demos
Deployed on Netlify (great service, recommended): https://jelements.netlify.com
The docs site is built using Polymer CLI (to handle bare module specifiers) and has extra dependencies (helper elements and other components for demo purposes).
The docs site does not work in Firefox currently. I also haven’t tested in on Edge or IE11
Published by jouni over 6 years ago
The first iteration of web components. The components are Polymer 2 based and use Vaadin’s ThemableMixin to offer flexible styling capabilities. The default styling is based on the Vaadin Lumo design language.
<j-card>
A flexible component for visual cards.
<j-avatar> and <j-avatar-group>
Show an icon, name abbreviation or a profile image.
<j-tooltip>
A tooltip that can escape any stacking context (i.e. it is never clipped by any parent element).