Category: web components

Using Polymer in WordPress: Build a Custom Google Maps Component

Web components are a set of standards for creating custom, reusable HTML elements. Polymer is an open-source JavaScript library for building web applications using web components. Created by those clever folks at Google, it provides a number of additional features over vanilla web components and when used with a polyfi...

Jekyll Includes are Cool

Dave Rupert: When cruising through the Includes documentation I noticed a relatively new feature where you can pass data into a component. I was similarly excited learning about Macros in Nunjucks. Then: After a couple days of writing includes like this I thought to myself “Why am I not just writing Web Compone...

An intro to web components with otters

Monica Dinculescu on web components and why we might care: … before web components came around, you had to wait on all browsers to agree on a new element (like, a date picker). And even after they agreed on a new element, it took them yeaaaaars to implement it… With web components, web developers get to wri...

Styled-Components: Enforcing Best Practices In Component-Based Systems

    Building user interfaces on the web is hard, because the web and, thus, CSS were inherently made for documents. Some smart developers invented methodologies and conventions such as BEM, ITCSS, SMACSS and many more, which make bui...

Styling Web Components Using A Shared Style Sheet

    Web components are an amazing new feature of the web, allowing developers to define their own custom HTML elements. When combined with a style guide, web components can create a component API, which allows developers to stop copy...

Extensible Web Components

Some interesting thoughts from Jeremy Keith about his concerns with Web Components: Compare Service Workers to web components. First of all, ask the question “who benefits from this technology?” In the case of Service Workers, it’s the end users. They get faster websites that handle network failure better. In the...

How to Make Accessible Web Components — a Brief Guide

This article was peer reviewed by Mallory van Achterberg. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! In a previous article I demonstrated how to create a multiselect web component. In the comments section of that article, readers touched on the very important subject ...

Creating a Multiselect Component as a Web Component

Web applications become every day more complicated and require a lot of markup, scripts and styling. To manage and maintain hundred kilobytes of HTML, JS, and CSS we try to split our application into reusable components. We try hard to encapsulate components and prevent styles clashing and scripts interference. In the ...

Understanding Components in Ember 2

This article was peer reviewed by Edwin Reynoso and Nilson Jacques. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! Components are a vital part of an Ember application. They allow you to define your own, application-specific HTML tags and implement their behavior using Jav...

Building an Image Gallery Component with Polymer

Web components are becoming the future trend of Web application development. They allow us to group HTML markup, scripts, and styles into a reusable component. These components are part of the browser and hence don’t need external JavaScript libraries like jQuery to provide its functionality. As reported by Wikip...