International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.

1, January 2024

ADVANCING WEB DEVELOPMENT - ENHANCING

COMPONENT-BASED SOFTWARE ENGINEERING
AND DESIGN SYSTEMS THROUGH HTML5
CUSTOMIZED BUILT-IN ELEMENTS
Hardik Shah

Department of Information Technology, Rochester Institute of Technology, Rochester,

New York, USA

ABSTRACT
The evolution of web development has been significantly influenced by the introduction of HTML5 Web
Components, particularly customized built-in elements. This paper explores the transformative impact of
these elements on Component-Based Software Engineering (CBSE) and Design Systems. Customized built-
in elements, as an integral part of the Web Components standard, offer unparalleled flexibility and
functionality, enabling developers to create bespoke HTML elements that encapsulate specific behaviors
and styles. This adaptability is pivotal for CBSE, facilitating the modularization of complex applications
into more manageable components. This research delves into how customized built-in elements enhance
Design Systems, ensuring visual consistency and superior user experience across digital applications. By
adapting these elements to align with an application's design language and brand identity, a seamless and
visually cohesive interface is achieved. The paper also examines the cross-browser compatibility,
performance optimization, and security considerations associated with implementing these elements,
emphasizing their critical role in efficient web application integration. Furthermore, the paper highlights
the significance of these elements in contemporary web development scenarios, including Internet of
Things (IoT) applications, e-commerce platforms, and educational technologies. The interaction of these
components with Progressive Web Apps (PWAs) is also explored, showcasing potential improvements in
web experiences. In conclusion, the paper underscores the necessity of addressing challenges such as
browser standardization and developer tooling to fully realize the potential of HTML5 customized built-in
elements. The discussion concludes with an outlook on the future of these elements, projecting their
continuing influence in advancing the field of web development.

KEYWORDS
Customized built-in elements, HTML5 Web Components, Component Based Software Engineering, Design
Systems, Web UI development

1. INTRODUCTION
The realm of web development has witnessed a paradigm shift with the advent of HTML5 Web
Components, a suite of technologies that enable the creation of reusable, encapsulated, and
interoperable web components. Central to this evolution are the customized built-in elements,
which represent a significant leap in Component-Based Software Engineering (CBSE) and
Design Systems. This paper aims to elucidate the impact of these elements in revolutionizing web
development, emphasizing their role in enhancing software engineering practices and design
systems.

DOI: 10.5121/ijwest.2024.15102 17
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024
At its core, the concept of HTML5 Web Components, particularly customized built-in elements,
stems from the need to extend the capabilities of standard HTML. These elements allow
developers to build their unique HTML tags, complete with custom functionality and styling.
This innovation addresses a longstanding limitation of HTML, where developers were confined
to a predefined set of elements. Customized built-in elements empower developers to create more
complex, efficient, and tailored web applications, significantly enriching the web development
landscape [1].

The significance of these elements in CBSE cannot be overstated. In traditional software

engineering, a monolithic approach often leads to complexities in code maintenance and
scalability. Customized built-in elements introduce a modular approach, enabling developers to
break down complex software applications into smaller, manageable components. These
components, which encapsulate specific functionalities and aesthetics, can be reused across
different parts of an application or even across different applications, fostering a culture of
reusability and efficiency. This modularization is pivotal in managing large-scale web
applications, making them more maintainable and scalable [2].

In the context of Design Systems, customized built-in elements play a critical role in ensuring
visual and functional consistency across various digital platforms. A Design System is a
comprehensive set of guidelines, principles, and components used to design and develop digital
products. By leveraging customized built-in elements, Design Systems can enforce consistency in
design and user experience, ensuring that different components of a digital product feel cohesive
and aligned with the brand's identity. This consistency is crucial in creating intuitive and user-
friendly interfaces, thereby enhancing the overall user experience [3][4].

The paper also touches upon the practical aspects of implementing these elements, such as cross-
browser compatibility, performance optimization, and security considerations. These elements
bring their challenges and require careful consideration to integrate effectively into web
applications. Issues like browser standardization and accessibility are critical for ensuring that
web components function seamlessly across different web environments [5].

As the digital landscape continues to evolve, the role of HTML5 customized built-in elements in
shaping the future of web development becomes increasingly apparent. Their integration with
emerging technologies like the Internet of Things (IoT) and Progressive Web Apps (PWAs)
points to a future where web applications are more dynamic, responsive, and user-centric. This
paper not only highlights the current state of these elements in web development but also
provides a forward-looking perspective on their potential applications and challenges [21].

In conclusion, the adoption of customized built-in elements in HTML5 Web Components marks
a significant advancement in web development. By enabling the creation of modular, reusable,
and customizable components, these elements empower developers to build more efficient,
scalable, and user-friendly web applications. This paper provides an in-depth exploration of their
impact on CBSE and Design Systems, offering valuable insights for researchers, practitioners,
and enthusiasts in the field of web development.

2. WEB COMPONENTS API AND CUSTOM ELEMENTS

2.1. Custom Elements in HTML5 Web Components

HTML5 Web Components feature a dynamic capability enabling developers to craft and
establish their unique HTML elements, referred to as custom elements. These custom

18
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024
components provide a distinct and robust feature, allowing developers to encapsulate
functionality, structure, and style similar to their well-known HTML equivalents, such as <div>
and <p>. Custom elements, at the heart of the Web Components standard, serve as a gateway to
increasing HTML's vocabulary [3]. This enhancement streamlines the development of reusable
and modular web application components [1]. 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].

Figure 1: Example of MyCustomElement and lifecycle events using HTML5 custom elements API.
Source: Adapted from [7]

19
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024

Figure 2: HTML declaration of MyCustomElement. Source: Adapted from [7]

In this case, we'll make a custom element called <my-custom-element />. This new custom
element is defined in runtime using JavaScript. We established a class MyCustomElement that
extends HTMLElement. If required, we can use attachShadow method to generate a shadow
DOM within its constructor. We build a <my-custom-element /> element and define its content
and styling. Several lifecycle methods required to get access to the component are available as
part of the API - connectedCallback, disconnectedCallback, adoptedCallback and
attributeChangedCallback. Following that, the [Link] method is used to register
the custom element "my-custom-element" for use in HTML. After you've defined it, you can use
<my-custom-element></my-custom-element> like any other HTML element. If you pass
attributes - size and color, any change to these attribute values will trigger
attributeChangedCallback and eventually log the attribute name in the browser console. This
example implementation highlights the power of HTML5 Web Components' custom elements,
which allow you to construct reusable and encapsulated components with their own behavior and
appearance.

2.2. Customized Built-In Elements: Tailoring Web Components for Specific Needs

A distinct and highly specialized class of entities known as customized built-in elements develops
from the vast geography of the Web Components API. They derive its semantic meaning from
the base element which it is extending. These custom elements are painstakingly developed to
meet individual web applications' precise and frequently sophisticated needs [8]. Developers have
incredible control and accuracy when creating and improving these elements, adapting them to
encompass precise functionality, visual aesthetics, and interactive behaviors [2]. Customized
built-in elements are distinguished by their extensive feature sets, which include a wide range of
properties, methods, and event-driven mechanisms. Each component in this system has been
meticulously crafted to integrate seamlessly with the distinct architecture of a particular
application [8]. This seamless integration is a cornerstone, increasing code modularity and
reusability by enclosing complicated and multifarious functions into self-contained components
[5].

20
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024

Figure 3: Code example for Customized built-in element. Source: Adapted from [9]

3. ADVANTAGES OF CUSTOMIZED BUILT-IN ELEMENTS

HTML5's custom elements feature allows developers to specify and create their own HTML
elements. These custom components, like built-in HTML elements (e.g., <div>, <p>), can
encapsulate functionality, structure, and styling and are a cornerstone of the Web Components
standard. They offer a robust method to expand the lexicon of HTML, simplifying the process of
developing modular and reusable components for web applications. The beauty of custom
elements is their JavaScript-based definition, allowing them seamlessly integrate into web pages
like any other HTML element. The Web Components API adds a new category of customized
built-in elements, representing a significant advancement in web development. These custom
elements are painstakingly developed to meet individual web applications' distinct and nuanced
needs [10]. Developers possess the distinct ability to design and precisely adjust these
components.

Customized built-in elements are defined by their adaptability, frequently spanning a diverse set
of attributes, methods, and events, all precisely crafted to integrate seamlessly with the
architecture of a particular application [4]. These components act as foundational elements that
promote reusability and the modular structure of code. They achieve this by encapsulating
complex and specific functionalities within self-sufficient, readily deployable units. This
transformational approach to web development improves software development productivity and
develops a culture of modular, manageable, and scalable code [10].

21
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024

Figure 4: Word count component implemented as a Customized built-in element. Source: Adapted from
[11]

22
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024

Figure 5: Source code for Word count component. Source: Adapted from [11]

Customized built-in elements are the foundations that allow developers to navigate the complex
landscape of web application development with precision and grace, providing bespoke solutions
to match the particular demands of any digital venture. For instance, <p is=”word-count” />
element can provide a consistent and feature-rich paragraph component with a word count feature
which is consistent across different web applications, reducing the need for third-party libraries
and ensuring a uniform look and feel. Similarly, a <img is=”user-avatar”> element implemented
using customized built-in elements API can automatically fetch and display a user profile picture
from a defined source, simplifying the process of user interface development. To conclude,
customized built-in elements give developers the accuracy and flexibility they need to handle the
unique needs of their digital projects, making web development more efficient and adaptable to a
wide range of applications and industries.

23
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024

4. APPLICATIONS OF CUSTOMIZED BUILT-IN ELEMENTS

4.1. Elevating Component-Based Software Engineering (CBSE)

Introducing customized built-in elements is disruptive in Component-Based Software

Engineering (CBSE). These aspects are essential in systematically creating software components,
allowing developers to break complex and multifaceted applications into more manageable,
granular entities. Each of these components has been painstakingly designed to interact with the
overall architecture and requirements of the software system [1]. Customized built-in elements
prove to be the cornerstone in this process, infusing CBSE with a profound feeling of modularity,
reusability, and maintainability [12]. 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].

In real-world CBSE projects, customized built-in elements can be used to create complex data
grids and interactive dashboards that are central to enterprise applications. Consider the case of
an E-commerce company which has several dashboards in their online public shopping web
application to represent latest sales and recent orders for the customer. Building new dashboards
from scratch would come at an extremely high effort and cost. Customized built-in elements can
address these challenges by allowing reusability of existing components in the Dashboards by
migrating to customized built-in elements to provide a seamless and interactive user experience
for data manipulation. However, developers face challenges such as ensuring the performance
and security of these components. Custom elements help address these challenges by allowing
encapsulation of functionality, which can lead to performance optimizations and better security
through shadow DOM.

4.2. Design Systems Empowered by Customized Built-In Elements

The adaptability of customized built-in pieces extends much beyond the limitations of
Component-Based Software Engineering (CBSE). These aspects emerge as vital instruments with
transformative potential within the vast area of web-based Design Systems [4]. Design
frameworks, serving as repositories for recyclable web UI components, design principles, and
established guidelines, are crucial in maintaining uniformity and consistency across various
digital platforms and brand environments, thereby supporting design and user experience [3].
Within this framework, customized built-in elements stand tall as the foundation upon which
many UI components manifest. These elements are used to precisely build buttons, input fields,
navigation bars, and critical interface elements. What distinguishes them is the artistry of
customization, which perfectly aligns each aspect with the application's distinctive design
language and brand identity. This thorough alignment is the key to developing a coherent and
visually appealing user interface that connects with the brand's character.

Organizations are prepared to start on a journey of frictionless consistency by seamlessly

incorporating customized built-in elements into Design Systems [4]. They may easily transmit a
consistent and visually pleasant user interface throughout the varied spectrum of their digital
products and platforms using these elements as their base [12]. Consequently, individuals can
traverse online environments experiencing both comfort and aesthetic appeal, due to the inventive
brilliance of customized built-in elements. This marks the dawn of a novel phase in the evolution
of Design Systems development. [3].

24
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024
Consider a huge e-commerce company with many digital channels, such as a website, mobile
app, and even voice-activated purchasing assistants. The company decides to establish a complete
design system in order to maintain a uniform and visually appealing user experience across all of
these platforms. This design system has components in the component library based on HTML5
customized built-in elements. The corporation can migrate their existing buttons in their
application to the customized built-in element called ‘SignUp’ by adding just one attribute to
their existing HTML5 buttons and importing the new design system library. This SignUp button
has been precisely crafted to complement the company's brand identity and design language. It
includes variables such as size, color, and shape, allowing developers to adjust button look based
on platform constraints while maintaining brand consistency.

Here's how this example relates to Design Systems empowered by customized built-in elements:
● Consistency: The e-commerce company guarantees that buttons throughout its website,
app, and voice-activated assistants have a uniform look and feel by leveraging
customized built-in elements like <button is=”SignUp”>Sign Up</button>.
● Alignment with Brand Identity: Using the customization options in <button
is=”SignUp”>, the organization may align each button with its individual brand identity,
resulting in a consistent and visually appealing user interface.

Customized built-in elements, such as <button is=”SignUp”>, serve as modular building blocks
within the design system. The same API can be used to generate a variety of UI components such
as input fields, navigation bars, and other elements, enabling reusability and efficient design
revisions. As a result, customized built-in elements enable the organization to create a unified
design system that assures a coherent and visually appealing user experience across varied digital
products and platforms while accommodating platform-specific requirements [13].

5. SECURITY CONCERNS IN CUSTOMIZED BUILT-IN ELEMENTS

Customized built-in elements in HTML5 Web Components bring unique security challenges and
opportunities. One critical aspect is ensuring the security of the components themselves,
particularly when dealing with cross-origin resource sharing (CORS) and postMessage APIs.
CORS and postMessage APIs facilitate the secure exchange of data across different domains. The
postMessage API, in particular, allows scripts running on different domains to communicate
securely. Developers must carefully implement origin checks to prevent exposure to malicious
postMessage requests from unauthorized sources [14][15].

Another significant security concern is the safe handling of offline storage in HTML5, which
involves client-side SQL databases accessed by JavaScript. This feature accelerates web
applications by allowing repeated queries from the same data set. However, it also presents risks
such as SQL injection attacks if developers do not use SSL or prepare SQL statements properly.
Careful management of sensitive data stored offline, like passwords or email messages, is crucial
to avoid predictable attacks by hackers [16].

Custom elements often come with new attributes that could be abused for malicious purposes.
For instance, attributes like “autofocus” could be exploited to unwittingly steal focus from end-
users, directing it to elements rigged to execute malicious code. Developers must be vigilant
about how new attributes are used and the potential security implications.

HTML5's increased multimedia capabilities also introduce new security challenges. As browsers
implement native multimedia handling to support new tags, they may inadvertently introduce
bugs that open new vulnerabilities. Each browser's unique implementation of multimedia

25
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024
rendering could lead to different security threats, underscoring the need for rigorous testing and
validation [15][17].

6. INTEGRATION STRATEGIES WITH MODERN WEB FRAMEWORKS AND

LIBRARIES
Integrating customized built-in elements with modern web frameworks like React, Angular, or
Vue requires a comprehensive understanding of the peculiarities of each framework, especially
regarding their lifecycle methods and state management systems.

In the context of React, components are not instances of `HTMLElement`, like web components.
Instead, they are special JavaScript objects designed to construct the virtual DOM tree. React
components can be created using either class components or functional components. Class
components are JavaScript classes that extend the `[Link]` class, managing the state
of a component and returning JSX code through the `render` function. Functional components,
previously only presentational, can now manage state and lifecycle methods with React Hooks.
This distinction is crucial when integrating custom elements with React, as the way these
components manage state and lifecycle events differs significantly from traditional web
components [18].

Angular, on the other hand, packages components as custom elements in a framework-agnostic

way, making it possible to use Angular components as standard HTML elements outside of the
Angular ecosystem. This feature is particularly useful when integrating Angular components with
other frameworks or legacy systems. The lifecycle methods of Angular allow developers to
perform actions at different stages of a component or directive's life cycle, such as initialization
or destruction [19].

For successful integration, developers must also focus on the performance implications of
incorporating custom elements into these frameworks. Strategies like efficient state management,
minimization of re-renders, and, if applicable, lazy loading of components can significantly
enhance the performance of web applications using custom elements. Additionally,
understanding the nuances of event handling in custom elements, such as dispatching events in
response to internal component activities, is critical for seamless integration.

In conclusion, the integration of customized built-in elements with modern web frameworks
involves a strategic approach, taking into account the specific lifecycle methods, state
management, and performance considerations of each framework. This ensures that custom
elements work in harmony with the framework's reactivity system, maintaining their intended
functionality without conflicts.

7. CUSTOMIZED BUILT-IN ELEMENTS AND WEB APPLICATION

PERFORMANCE
The following case studies and techniques demonstrate the significant impact of customized
built-in elements and optimization strategies on web application performance and user
experience.

1. Lazy Loading in Micro Front-Ends: Micro front-ends, an architectural approach breaking

down front-end monoliths into smaller, independently deliverable components, are
increasingly adopting lazy loading techniques. Lazy loading in this context refers to the
dynamic and asynchronous loading of components or sub-parts of the application. This
26
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024
strategy is particularly effective in large and complex web applications, contributing
significantly to performance enhancement and efficient resource utilization. The essence
of lazy loading in micro front-ends lies in loading only the essential modules and
components, thereby improving startup speed and overall program performance. This
approach is especially beneficial when a significant proportion of resources is not
required at startup, allowing for a more efficient allocation of hardware resources and
CPU usage [20].

2. Case Studies: Pinterest and Starbucks: Prominent examples of successful implementation

of these optimization techniques can be seen in Progressive Web Applications (PWAs)
like Pinterest and Starbucks. Pinterest employed lazy loading to prioritize the loading of
visible content, significantly improving load times and user engagement. This
optimization was crucial in minimizing data usage while maintaining image quality,
resulting in enhanced user experience and increased ad revenue generation. Similarly,
Starbucks leveraged a PWA to streamline its ordering process, offering an intuitive
interface that significantly improved customer satisfaction and, consequently, sales and
repeat business [21].

3. Eager vs. Lazy Loading: An interesting comparison arises between eager and lazy
loading techniques. Eager loading entails generating all web page content as soon as
possible, while lazy loading delays the display of non-essential content. The choice
between these techniques depends on the specific needs of the web page. For instance,
pages with lots of heavyweight content such as images and videos benefit more from lazy
loading, while simpler pages with limited content are better suited for eager loading.

4. Prefetching and Resumability: In addition to lazy loading, other performance

optimization techniques like prefetching and resumability have gained traction.
Prefetching involves loading resources and pages that might be needed next, significantly
speeding up load times when the user interacts with prefetched links. This technique
leverages idle bandwidth to cache data within the browser, enhancing page transitions.
On the other hand, resumability, a less well-known concept, renders JavaScript partially
on the server, transferring the final state of the render to the client. This method saves
time and resources on the client side by offloading the heavy lifting to the server [22].

Implementing lazy loading, eager loading, prefetching, and resumability, particularly in the
context of micro front-ends and PWAs, can lead to drastic improvements in performance,
engagement, and overall success of web applications. As such, these approaches are vital for
researchers and practitioners in the field of web application development and optimization.

8. CONSIDERATIONS IN IMPLEMENTING CUSTOMIZED BUILT-IN

ELEMENTS
To effectively utilize HTML5 customized built-in elements, one must possess an in-depth
knowledge of the technical intricacies and design elements involved in web development. These
elements, while powerful, come with a set of considerations that developers must address to
ensure their effective integration into web applications. Firstly, browser compatibility is a
primary concern. 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 [23]. Developers must test their custom elements across a
spectrum of browsers to guarantee consistent behavior and appearance [6].

27
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024
Performance optimization is another critical consideration. Custom elements can introduce
performance bottlenecks, particularly if they contain complex logic or are used extensively on a
page. Developers should measure the impact of their elements on page load times and runtime
performance, optimizing through techniques such as lazy loading and avoiding excessive DOM
manipulation. Accessibility is a non-negotiable aspect of web development. Designing
customized built-in elements should always consider accessibility, making sure they are
functional and accessible for individuals with disabilities. This includes semantic structure,
keyboard navigability, and ARIA roles where appropriate [24].

Styling customized elements requires a strategy that balances encapsulation with flexibility.
While Shadow DOM provides style encapsulation, developers must also provide a means for
consumers of the element to customize styles as needed, often through CSS custom properties or
slots. State management within custom elements must be handled with care to avoid tightly
coupling the elements to a specific state management solution. Instead, elements should expose a
clear API for state updates and changes. Security considerations are paramount, as custom
elements can be susceptible to the same range of vulnerabilities as any web technology.
Developers must sanitize content to prevent cross-site scripting (XSS) and ensure that any data
bindings are secure.

Interoperability with other web components and frameworks is essential. Custom elements
should be designed to work within different contexts and alongside other components, which may
involve managing events and data flow between components. Testing customized built-in
elements is as important as testing any other part of the application. Automated testing should
cover the functionality of the element, its response to state changes, and its behavior under
different conditions. Documentation is often overlooked but is critical for the adoption and
maintenance of custom elements. Comprehensive documentation should cover the API, usage
examples, and any quirks or limitations [4]. Lastly, lifecycle management is a technical
consideration where developers must handle the creation, connection, disconnection, and attribute
changes of custom elements with lifecycle callbacks provided by the Web Components API [12].
In summary, the implementation of HTML5 customized built-in elements requires careful
consideration of cross-browser compatibility, performance, accessibility, styling, state
management, security, interoperability, testing, documentation, and lifecycle management.
Addressing these considerations is crucial for the successful integration of custom elements into
modern web applications.

9. FUTURE OF CUSTOMIZED BUILT-IN CUSTOM ELEMENTS

The horizon for customized built-in elements is expansive and promising, with the potential to
revolutionize web development in profound ways. As we look to the future, several applications
and challenges come into focus, heralding a new era of innovation and user-centric design.
Emerging Applications: The future applications of customized built-in elements are diverse.
Within the domain of the Internet of Things (IoT), these components act as the medium for
intricate interactions between devices, facilitating user-friendly control interfaces and enhanced
visualization of data [23]. In e-commerce, customized elements can provide unique shopping
experiences with interactive and personalized components that enhance user engagement [25].
Educational technology can leverage these tools to develop interactive and adaptive learning
settings tailored to each student's unique requirements [26].

Integration with Progressive Web Apps (PWAs): Customized built-in elements are set to play a
significant role in the development of Progressive Web Apps (PWAs). They can be used to create
app-like experiences within the browser, complete with offline capabilities and device-specific

28
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024
integrations [27]. This synergy will likely drive further adoption of PWAs as businesses seek to
provide seamless experiences on both desktop and mobile [9].

10. CHALLENGES AND CONSIDERATIONS

Despite the potential, there are challenges that need to be addressed. One of the primary concerns
is the standardization across browsers. While major browsers support custom elements, there are
inconsistencies in implementation that can lead to compatibility issues [28]. Performance
optimization is another challenge, as the complexity of custom elements can impact load times
and runtime efficiency [29].

Enhancing Accessibility: Accessibility will remain a critical challenge. When creating

customized built-in components, it's essential to prioritize accessibility from the beginning. These
components should adhere to the Web Content Accessibility Guidelines (WCAG) to ensure they
are accessible and user-friendly for individuals with disabilities [30].

Security Implications: Security is another area of concern. Custom elements that handle data
must be designed to prevent vulnerabilities such as cross-site scripting (XSS) and ensure data
privacy [31].

Tooling and Developer Experience: Advancing the design of more advanced tools will be crucial
for facilitating the creation and upkeep of customized built-in elements [4]. Integrated
development environments (IDEs) and frameworks will need to evolve to provide better support
for debugging and testing these components [32].

Standardization and Community Engagement: The evolution of web standards will continue to
shape the future of customized built-in elements. Active engagement with the web standards
community will be crucial to ensure that the development of custom elements aligns with the
evolving needs of the web [33].

In conclusion, the future of customized built-in elements is bright but requires careful navigation
of emerging technologies, standards, and user expectations. As the web continues to evolve, these
elements will be at the forefront of creating more dynamic, efficient, and user-friendly web
applications.

CONCLUSION
This research demonstrates that HTML5 Web Components, especially customized built-in
elements, are revolutionizing web development. They significantly impact Component-Based
Software Engineering (CBSE) and Design Systems, redefining web application standards. These
elements facilitate a modular approach, simplifying development and enhancing application
maintainability and scalability. They allow for the reuse of components, boosting efficiency and
reducing repetitive coding, thereby accelerating development and cutting costs. Customized built-
in elements are crucial in Design Systems, ensuring consistency across platforms and aligning
with brand identity for cohesive user experiences. This consistency is vital for brand recognition
and user satisfaction. Challenges like browser standardization and ensuring accessibility and
security are critical as these elements gain prevalence. Future prospects are promising, with these
elements integrating with technologies like IoT and PWAs, suggesting a more interactive and
user-centric web. HTML5 customized built-in elements herald a new era in web development,
offering tools for dynamic, scalable, and user-friendly applications. Despite existing challenges,
their potential impact on web development continues to be significant.

29
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024

REFERENCES

[1] C. Erazo Ramirez, Y. Sermet, and I. Demir, “HydroLang Markup Language: Community-driven web
components for hydrological analyses,” Journal of Hydroinformatics, vol. 25, no. 4, pp. 1171–1187,
Jul. 2023, doi: 10.2166/hydro.2023.149.
[2] M. Nadeem, H. Afzal, M. Idrees, S. Iqbal, and M. R. Asim, “A Review Of Progress for Component
Based Software Cost Estimation From 1965 to 2023.” arXiv, Jun. 06, 2023. doi:
10.48550/arXiv.2306.03971.
[3] Kulhánek, T., Mládek, A., Brož, M., & Kofránek, J., “Bodylight. js web components-webové
komponenty pro webové simulátory.” in Medsoft. 2021; pp. 48-52.
[Link]
[4] J. Wusteman, “The potential of web components for libraries,” Library Hi Tech, vol. 37, no. 4, pp.
713–720, Jan. 2019, doi: 10.1108/LHT-06-2019-0125.
[5] Margaret Savage, Tigmanshu Bhatnagar, Cynthia Liao, Mathilde Chaudron, Jeffrey Boyar, Dennis
Laurentius, George Torrens, Katherine Perry, Priya Morjaria, Felipe Ramos Barajas, Barbara Goedde,
Catherine Holloway, “Product Narrative: Digital Assistive Technology | AT2030 Programme.”
Accessed: Oct. 01, 2023. Available: [Link]
technology/
[6] A. D. Brucker and M. Herzberg, “A Formally Verified Model of Web Components,” in Formal
Aspects of Component Software: 16th International Conference, FACS 2019, Amsterdam, The
Netherlands, October 23–25, 2019, Proceedings, Berlin, Heidelberg: Springer-Verlag, Oct. 2019, pp.
51–71. doi: 10.1007/978-3-030-40914-2_3.
[7] “Using custom elements - Web APIs | MDN.” Accessed: Nov. 08, 2023. Available:
[Link]
[8] M. Saari, M. Nurminen, and P. Rantanen, “Survey of Component-Based Software Engineering within
IoT Development,” in 2022 45th Jubilee International Convention on Information, Communication
and Electronic Technology (MIPRO), May 2022, pp. 824–828. doi:
10.23919/MIPRO55190.2022.9803785.
[9] “Custom Elements - HTML Standard.” Sep. 24, 2023. Accessed: Sep. 24, 2023. Available:
[Link]
[10] Y. Sermet and I. Demir, “A Semantic Web Framework for Automated Smart Assistants: A Case
Study for Public Health,” Big Data and Cognitive Computing, vol. 5, no. 4, Art. no. 4, Dec. 2021,
doi: 10.3390/bdcc5040057.
[11] “web-components-examples | A series of web components examples, related to the MDN web
components documentation,” MDN web components documentation. Accessed: Nov. 08, 2023.
Available: [Link]
[12] C. Diwaker et al., “A New Model for Predicting Component-Based Software Reliability Using Soft
Computing,” IEEE Access, vol. 7, pp. 147191–147203, 2019, doi: 10.1109/ACCESS.2019.2946862.
[13] H. Shah, “Harnessing customized built-in elements -- Empowering Component-Based Software
Engineering and Design Systems with HTML5 Web Components,” in Computer Science & IT
Conference Proceedings, in 22, vol. 13. Academy & Industry Research Collaboration Center, Nov.
2023, pp. 247–259. doi: 10.5121/csit.2023.132219.
[14] “HTML5 Built-In Security Features from Security Innovation | NICCS.” Accessed: Dec. 14, 2023.
Available: [Link]
features.
[15] “HTML5 Security Cheatsheet.” Accessed: Dec. 14, 2023. Available: [Link]
[16] Tasevski and K. Jakimoski, “Overview of SQL Injection Defense Mechanisms,” in 2020 28th
Telecommunications Forum (℡FOR), Nov. 2020, pp. 1–4. doi:
10.1109/℡FOR51502.2020.9306676.
[17] D. Nilsson and H. Åberg, HTML5 Web application security with OWASP. 2013. Accessed: Dec. 14,
2023. Available: [Link]
[18] Khosravi, “Web components vs. React,” LogRocket Blog. Accessed: Dec. 14, 2023. Available:
[Link]
[19] “Angular - Angular elements overview.” Accessed: Dec. 14, 2023. Available:
[Link]

30
 International Journal of Web & Semantic Technology (IJWesT) Vol.15, No.1, January 2024
[20] H. Park and C. Kim, “Design of Adaptive Web and Lazy Loading Components for Web Application
Development,” Journal of the Korea Institute of Information and Communication Engineering, vol.
23, no. 5, pp. 516–522, 2019, doi: 10.6109/jkiice.2019.23.5.516.
[21] D. Fortunato and J. Bernardino, “Progressive web apps: An alternative to the native mobile Apps,” in
2018 13th Iberian Conference on Information Systems and Technologies (CISTI), Jun. 2018, pp. 1–6.
doi: 10.23919/CISTI.2018.8399228.
[22] “Five Data-Loading Patterns To Boost Web Performance,” Smashing Magazine. Accessed: Dec. 14,
2023. Available: [Link]
frontend-performance/
[23] T. Bui, “Web components : concept and implementation.” Accessed: Nov. 08, 2023. Available:
[Link]
[24] H. Shah, “Advancing Web Accessibility -- A guide to transitioning Design Systems from WCAG 2.0
to WCAG 2.1,” in Computer Science & IT Conference Proceedings, in 22, vol. 13. Academy &
Industry Research Collaboration Center, Nov. 2023, pp. 233–245. doi: 10.5121/csit.2023.132218.
[25] Rosclaritha Maidom, A. Baharum, R. Ismail, N. S. A. Fatah, M. Omar, and N. A. M. Noor,
“Elements of Optimizing User Engagement in E-Commerce Website,” in Proceedings of the 8th
International Conference on Computational Science and Technology, R. Alfred and Y. Lim, Eds., in
Lecture Notes in Electrical Engineering. Singapore: Springer, 2022, pp. 273–282. doi: 10.1007/978-
981-16-8515-6_22.
[26] A. Wagler, “Understanding of How Communications Students Use Interactive Instructional
Technology From a User Experience Perspective,” Journalism & Mass Communication Educator,
vol. 74, no. 1, pp. 79–91, Mar. 2019, doi: 10.1177/1077695818777413.
[27] Singraber, J. Behler, and C. Dellago, “Library-Based LAMMPS Implementation of High-
Dimensional Neural Network Potentials,” J. Chem. Theory Comput., vol. 15, no. 3, pp. 1827–1840,
Mar. 2019, doi: 10.1021/[Link].8b00770.
[28] P. Patidar and M. Sharma, “Investigation of Cross-Browser Inconsistency Over the Network.”
Rochester, NY, Feb. 22, 2019. doi: 10.2139/ssrn.3350994.
[29] L. J. Murugesan and S. R. Seeranga Chettiar, “Design and Implementation of Intelligent Classroom
Framework Through Light-Weight Neural Networks Based on Multimodal Sensor Data Fusion
Approach.,” Revue d’Intelligence Artificielle, vol. 35, no. 4, 2021, Accessed: Nov. 07, 2023.
Available: [Link]
[30] O. Taiwo and A. E. Ezugwu, “Smart healthcare support for remote patient monitoring during covid-
19 quarantine,” Informatics in Medicine Unlocked, vol. 20, p. 100428, Jan. 2020, doi:
10.1016/[Link].2020.100428.
[31] W. A. Jabbar et al., “Design and Fabrication of Smart Home With Internet of Things Enabled
Automation System,” IEEE Access, vol. 7, pp. 144059–144074, 2019, doi:
10.1109/ACCESS.2019.2942846.
[32] Z. Tang, B. Kang, C. Li, T. Chen, and Z. Zhang, “GEPIA2: an enhanced web server for large-scale
expression profiling and interactive analysis,” Nucleic Acids Research, vol. 47, no. W1, pp. W556–
W560, Jul. 2019, doi: 10.1093/nar/gkz430.
[33] G. Weng et al., “HawkDock: a web server to predict and analyze the protein–protein complex based
on computational docking and MM/GBSA,” Nucleic Acids Research, vol. 47, no. W1, pp. W322–
W330, Jul. 2019, doi: 10.1093/nar/gkz397.

AUTHORS

Hardik Shah With his expertise in UX Design, UI engineering and Web

Accessibility, Hardik is an experienced professional, researcher and consultant who
advocates for building semantic and accessible Design Systems to bridge user needs
and technological innovation for User Interface engineering for the Web.

31