Setting HTML Standards Compliant Boolean Attributes with different Frameworks

Problem Many component libraries, especially those built with vanilla Web Components, follow a specific way of dealing with boolean attributes, specified by the HTML Living Standard. Many Frameworks however do not apply the same standards and patterns in their approach, including but not limited to, frameworks that rely on JSX. We try to reconcile these two, by showing how we can use standards compliant syntax in some JavaScript frameworks. What does the Standard say The HTML Living Standard states that...

March 2, 2024 · Joel Tok

Exposing Lit Element Attribute and Properties for Outside Use

Problem Building a Lit Element component, and defining their properties for internal consumption is very well explained. However, in this article we are interested more with how to define the interface between our lit element and its consumer. In other words, we want to examine how to set lit element attributes and properties from outside of the component, and use these in the component. We also want to understand some of the intricacies and quirks associated with this process....

February 24, 2024 · Joel Tok

Vanilla Web Components from Scratch – A Dive

Introduction In this article we aim to develop a fundamental understanding of what Web Components are, by methodically and comprehensively building and modifying our own standalone Web Component through a variety of patterns. Let’s jump right in. The Component – A Terrapin Card To start off, let’s build our first Web Component and render it with an html file. I like pets, and I used to keep terrapins, so let’s use that as an example....

February 22, 2024 · Joel Tok