Proof-of-concept and prototype web components to fill in some gaps in the Vaadin components collection
APACHE-2.0 License
Bot releases are hidden (Show)
This utility is deprecated. Consider using PortalElement
instead, which is an iteration on the same concept but with less limitations.
The components and utilities no longer work in browsers without native Shadow DOM and CSS Custom Properties support.
<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 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
).
Replaces the previous TeleportingElement
experiment. PortalElement has less limitations.
JField
got a major refactoring. It now uses the browser’s built-in validation features more (such as localized validation messages).
A new utility for easily animating element additions and removals from the DOM.
Docs for MutationAnimationMixin ›
src/components
src/util
Published by jouni about 6 years ago
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.
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.
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).
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).