Web development today is heavily rooted in the manipulation of HTML tags, a practice that stems from an outdated perception of how browsers handle content. With the advent of the Document Object Model (DOM), browsers transformed HTML from a static markup language into a dynamic structure of element objects. This shift made HTML files mere source inputs, parsed and replaced by the DOM representation—a living, interactive model that underpins web functionality. Despite this paradigm shift, the industry continues to program to tags, clinging to a "Tag View" that is not only labor-intensive but fundamentally restrictive. By reorienting development practices towards programming directly to element objects, we unlock a more efficient and powerful way to build web applications, embracing the full potential of modern browser capabilities. This paper challenges conventional methodologies and advocates for a shift that aligns web development with its true underlying architecture.
When a browser processes an HTML source file, it interprets each tag as a blueprint for creating an object within the DOM. For example, encountering prompts the browser to locate the object definition for the label element, invoke its parameterless constructor, and initialize the associated properties of the object. This object is then integrated into the DOM structure, forming the basis for subsequent web operations. However, to provide developers with a tag-based "virtual HTML document," the browser goes through an additional layer of effort that it itself does not use. This "Tag View" is merely a representation for programmers, detached from the core DOM structure driving web functionality.
To support searching for elements based on tags, browsers introduce "fake" attributes to the "Tag View." These attributes are not inherent to the DOM objects themselves but are manually added to simulate tag-based interactions. This process of creating and maintaining these attributes for the tag view introduces redundant complexity. It requires unnecessary work that both duplicates the DOM's capabilities and limits the efficiency of web development practices, detracting from the streamlined model that the DOM fundamentally offers.
Custom HTML Elements and Constructable Style Sheets represent significant advancements in the web development landscape that have been largely overlooked. Custom HTML Elements were formally introduced as part of the Web Components specification in 2014. They allow developers to define their own HTML tags, complete with custom behavior and properties, enabling greater flexibility and reusability. This was a major step forward, providing developers with the tools to extend the browser's native element set with their own tailor-made components.
Constructable Style Sheets, first proposed in 2018, offered a new mechanism for creating and managing CSS rules in a programmatic way. Unlike traditional CSS, which is tied to static stylesheets or inline styles, Constructable Style Sheets can be dynamically instantiated and shared across multiple components. This innovation aimed to streamline styling in applications with dynamic or component-based architectures, yet it has not received the widespread attention it deserves. Both tools have been available for years, quietly waiting for developers to fully embrace their potential.
Custom Elements (CEs) redefine HTML as "Objects with GUIs" by associating a class with a tag. Using customElements.define('my-element', MyElementClass), we link a JavaScript class to a tag name, enabling the browser to treat <my-element> like any native HTML tag. This means the browser invokes a parameterless constructor and initializes the DOM object when the tag is used, either in the source file or via document.createElement('my-element'). However, since Custom Elements are fundamentally JavaScript objects, developers can instantiate them directly with new MyElementClass(), even passing parameters during initialization. This rarely acknowledged capability of Custom Elements—leveraging their object-oriented nature—is the true, underutilized strength of the feature.
Much of the guidance around Custom Elements focuses on their tag-centric use, promoting patterns like attribute reflection, Shadow DOM, and the connectedCallback for integrating with the "Tag View." While these features serve specific purposes, they often perpetuate tag-based workflows and should be seen as optional or edge-case solutions. Embracing the full potential of Custom Elements requires abandoning half-measures and fully committing to an object-oriented paradigm. This shift simplifies development, reduces unnecessary complexity, and aligns CEs with their true design as objects rather than glorified tags.
An element's visual representation is governed by its style property, a collection of attributes that define the object's appearance—such as width, height, color, and border. JavaScript provides direct access to this style property, allowing developers to dynamically manipulate these attributes as though they were fields of the element object. For example, element.style.width = "200px"; or element.style.backgroundColor = "blue"; updates the object's visual characteristics instantly. This interaction reinforces the concept of elements as "Objects with GUIs," where their visual representation is just another aspect of their properties.
While the TagName of an element isn't essential to its function as an object, it serves as the "native type" for browsers. This fundamental association links tags to their corresponding objects and ensures consistency in how the DOM processes and renders elements. A key example of this linkage is CSS, which many misunderstand as being tied directly to the class attribute of elements. In reality, the class attribute predates CSS and serves as a general-purpose identifier. CSS itself is merely a shorthand notation—a string representation of the style object's properties. A .css file is, fundamentally, just source code that defines these shorthand properties. Through tags and attributes, CSS can be associated with objects, enabling browsers to apply predefined styles efficiently while maintaining the object-oriented model at their core.
An element's visual representation is governed by its style property, a collection of attributes defining its appearance, such as width, height, and color. JavaScript allows direct manipulation of this property, enabling developers to set or modify visual aspects dynamically. For example, element.style.width = "200px"; directly alters the object's appearance. This interaction solidifies the view of elements as "Objects with GUIs," where their graphical representation is managed as just another set of object properties.
Another way we can alter style properties is CSS. CSS is fundamentally a "style property shorthand" string, providing a concise way to define style properties and their values. This string can be directly applied to an element's style property, such as using style="color: red;" within an HTML tag. Beyond this direct application, CSS can be created using <style> tags or external CSS files, both of which are static source files established at creation. These "library" styles are applied to elements through Selectors, which connect CSS rules to elements using the Tag View.
Constructable Style Sheets (CSS Sheets) redefine CSS as programmatically manageable objects rather than static strings or files. Traditionally, CSS styles are declared within <style> tags or external .css files, creating a static system that is parsed and fixed at the moment of creation. Constructable Style Sheets break away from this static paradigm by allowing developers to define and manipulate style rules dynamically using JavaScript. Similar to Custom Elements, CSS Sheets are JavaScript objects that can be instantiated with new CSSStyleSheet(). Developers can then programmatically populate these objects with style rules, bypassing the need for static <style> tags or external files entirely.
The ability to dynamically create and manage styles through JavaScript unlocks a significant yet often overlooked strength of Constructable Style Sheets. Like Custom Elements, Sheets provide a more object-oriented approach to styling, enabling developers to associate styles directly with elements or groups of elements without relying on tag-based selectors or the static CSSOM workflow. This capability fundamentally shifts CSS into the realm of dynamic object management, aligning style creation and application with modern development practices that prioritize flexibility and efficiency. Constructable Style Sheets represent another underutilized tool with the potential to reshape web fundamentals.
By combining the object-oriented power of Custom Elements and the dynamic flexibility of Constructable Style Sheets, we can transcend the limitations of traditional tag-centric and static approaches to web development. These technologies, when used together, allow us to simplify the complexity of modern applications while simultaneously enhancing flexibility, maintainability, and scalability. As the song goes, “Some people change, others hang on 'till they can't any more.” The question now is which path we choose—clinging to the old or embracing the new.
The foundational architecture of browsers and HTML remains tethered to the legacy of traditional paper documents—a design that has persisted for 35 years. Modern web development, however, is rarely document-based. Forcing everything into this mold introduces unnecessary complexity and rigid workflows, while limiting innovation. By adopting Custom Elements and Constructable Style Sheets, we can break free from these constraints and redefine web development for a new era.
In this paper, we will demonstrate how to leverage these technologies to fundamentally rethink web development. We will explore new concepts such as Taxels, Stylettes, Stylons, and Stylex, offering a fresh perspective on building efficient, manageable, and modern web applications. These ideas will challenge conventional practices and present a compelling vision for the future of web development. The next sections will show you how—it’s time to leave the old ways behind and step into a new era.