Using Web Components With React.js

React and web components are complementary technologies that can help us build a more modular, future-proof frontend. Discover when you might choose web components over React and how to use them together. React.js is a JavaScript framework used to build complex frontend applications. It provides convenient methods for managing state (i.e. memory) and lays out … Continued

Managing Responsive Design in Polymer

Over the years, media queries have helped web developers immensely with responsive design. It gives us a way to define CSS rules for a particular breakpoint relative to the browser’s viewport. As the web evolves, web components are becoming more popular and component developers are increasingly interested in applying responsive styles based on the dimensions … Continued

Polymer: Detect Outside Click of Custom Element

Sometimes you may find yourself wanting to detect clicks outside of your custom element in Polymer, the most popular use cases are when: closing a menu or closing a dropdown when the user clicks outside of it. Below is a quick and easy way to achieve this: Add an event listener to the document (*If your … Continued

The Vanilla Javascript Component Pattern

I started delving into web components about a year ago. I really liked the idea of getting a reference to a custom element and then calling methods and setting values right on the custom element. After that I looked into Polymer 3.0, which layered on a number of conveniences and best practices. These specifically came … Continued