A Formally Verified Model of Web Components

Abstract

The trend towards ever more complex client-side web applications is unstoppable. Compared to traditional software development, client-side web development lacks a well-established component model, i. e., a method for easily and safely reusing already developed functionality. To address this issue, the web community started to adopt shadow trees as part of the Document Object Model (DOM). Shadow trees allow developers to "partition" a DOM instance into parts that should be safely separated, e. g., code modifying one part should not unintentionally affect other parts of the DOM. While shadow trees provide the technical basis for defining web components, the DOM standard neither defines the concept of web components nor specifies the safety properties that web components should guarantee. Consequently, the standard also does not discuss how or even if the methods for modifying the DOM respect component boundaries. In this paper, we present a formally verified model of web components and define safety properties which ensure that different web components can only interact with each other using well-defined interfaces. Moreover, our verification of the application programming interface (API) of the DOM revealed numerous invariants that implementations of the DOM API need to preserve to ensure the integrity of components.

Harnessing Customized Built-in Elements: Empowering Component-Based Software Engineering and Design Systems with HTML5 Web Components

“…The benefit of custom elements is their adaptability, which allows developers to easily define these elements using JavaScript . Once defined, these custom elements integrate smoothly into web pages, behaving exactly like any other HTML element [6]. In this case, we'll make a custom element called <my-custom-element />.…”

“…Developers start on a quest to optimize the development process to unparalleled levels of efficiency by carefully utilizing these factors. The intrinsic compatibility of customized built-in parts with web application core architecture ensures that software components coexist healthily within the larger software ecosystem [6].…”

“…While modern browsers have embraced the Web Components standard, discrepancies remain in how different browsers handle custom elements, necessitating the use of polyfills for unsupported features [13]. Developers must test their custom elements across a spectrum of browsers to guarantee consistent behavior and appearance [6].…”

“…Customized built-in elements represent a significant change in the world of web development. They allow developers to construct their own HTML components with unique features and behaviors that are similar to typical HTML elements such as <div> or <p> [6]. This adaptability is key to the ideas of Component-Based Software Engineering (CBSE), which enable developers to divide complicated applications into modular, granular components [10].…”

Model Transformation as Conservative Theory-Transformation.

“…This is realized by a suitable encoding of object extensions in each object instance possessing sub-classes; see (Brucker & Wolff 2008a;Longuet et al 2014) for details of this construction. This extensible approach, i.e., following (Brucker & Wolff 2008a) has also been used successfully for modeling large and widely-used data structures such as the Document Object Model (DOM) used in web browsers (Brucker & Herzberg 2020).…”