Tag

Custom Elements

0 views collected around this technical thread.

360 Tech Engineering
360 Tech Engineering
Jun 26, 2024 · Frontend Development

Understanding Web Components: Custom Elements, HTML Templates, and Shadow DOM

This article explains the evolution, core specifications, and practical usage of Web Components—including Custom Elements, HTML templates, and Shadow DOM—while comparing them to modern front‑end frameworks and demonstrating how to build reusable, encapsulated UI components.

Component EncapsulationCustom ElementsFrontend Development
0 likes · 13 min read
Understanding Web Components: Custom Elements, HTML Templates, and Shadow DOM
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 10, 2024 · Frontend Development

Understanding Web Components: Core Concepts, Custom Elements, Shadow DOM, Slots, and Templates

This article introduces Web Components—a W3C‑standardized technology supported by all major browsers—explaining its core concepts (Custom Elements, Shadow DOM, Templates, Slots), providing step‑by‑step code examples, discussing lifecycle callbacks, compatibility, polyfills, and how it compares with frameworks like React and Vue.

Custom ElementsFrontend DevelopmentSlots
0 likes · 22 min read
Understanding Web Components: Core Concepts, Custom Elements, Shadow DOM, Slots, and Templates
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 10, 2023 · Frontend Development

Introduction to Web Components: History, Concepts, Custom Elements, Shadow DOM, Template and Slot

This article provides a comprehensive overview of Web Components, covering their development timeline, core concepts such as Custom Elements, Shadow DOM, templates and slots, practical code examples, lifecycle callbacks, debugging tools, and real‑world usage scenarios for modern frontend development.

Custom ElementsHTML TemplatesJavaScript
0 likes · 12 min read
Introduction to Web Components: History, Concepts, Custom Elements, Shadow DOM, Template and Slot
TAL Education Technology
TAL Education Technology
Jul 6, 2023 · Frontend Development

Introduction to Web Components: Custom Elements, Shadow DOM, Templates, and Slots

This article introduces Web Components, explains the three core technologies—custom elements, Shadow DOM, and templates with slots—provides detailed code examples for each, discusses lifecycle callbacks, demonstrates encapsulation benefits, and offers practical guidance on using them across modern front‑end frameworks.

Custom ElementsSlotsTemplates
0 likes · 12 min read
Introduction to Web Components: Custom Elements, Shadow DOM, Templates, and Slots
ByteFE
ByteFE
Dec 28, 2022 · Frontend Development

Understanding Web Components: Features, Lifecycle, and Integration with Modern Frameworks

This article explains what Web Components are, details their core features such as Custom Elements, Shadow DOM, and HTML templates, demonstrates practical usage with React, Vue, and micro‑frontend scenarios, compares them to traditional frameworks, and discusses advantages, limitations, and related tools like Lit and Omi.

Custom ElementsJavaScriptWeb Components
0 likes · 57 min read
Understanding Web Components: Features, Lifecycle, and Integration with Modern Frameworks
政采云技术
政采云技术
May 31, 2022 · Frontend Development

Practical Guide to Web Components with LitElement

This article provides a comprehensive overview of Web Components and demonstrates how LitElement simplifies component creation, reactive properties, templating, styling, lifecycle management, complex data handling, two‑way binding, and directives, offering code examples and best‑practice recommendations for modern frontend development.

Custom ElementsJavaScriptLitElement
0 likes · 23 min read
Practical Guide to Web Components with LitElement
政采云技术
政采云技术
May 10, 2022 · Frontend Development

Building a UI Component Library with Web Components

This article explains how to create reusable UI components using Web Components by covering the three core concepts—custom elements, Shadow DOM, and HTML templates—demonstrating a button example, discussing component communication, two‑way binding, library packaging, framework integrations, current limitations, and reference resources.

Custom ElementsFrontend DevelopmentWeb Components
0 likes · 18 min read
Building a UI Component Library with Web Components
HelloTech
HelloTech
Jan 25, 2022 · Frontend Development

Introduction and Practice of Web Components and Shadow DOM

The article explains Web Components and their three core technologies—Template, Shadow DOM for CSS isolation, and Custom Elements—demonstrates building a dynamic HTML5 video component with lifecycle callbacks, and discusses use cases such as component libraries, cross‑platform development, micro‑frontends, and the feature‑rich Quark library.

Custom ElementsWeb Componentscomponent architecture
0 likes · 5 min read
Introduction and Practice of Web Components and Shadow DOM
ByteFE
ByteFE
Nov 22, 2021 · Frontend Development

Technical Decision and Practices of Using Web Components in EE NEXT SDK

This document details the EE NEXT SDK team's technical decisions to adopt Web Components for front‑end component development, explains the benefits and drawbacks of Custom Elements and Shadow DOM, outlines challenges such as cross‑stack compatibility, bundle size, style isolation, and provides practical implementation guidance and best‑practice recommendations.

Custom ElementsJavaScriptSDK
0 likes · 15 min read
Technical Decision and Practices of Using Web Components in EE NEXT SDK
ByteFE
ByteFE
Nov 4, 2021 · Frontend Development

Understanding Frameworks and Web Components in Frontend Development

This article explains why modern frontend developers use frameworks, compares React, Angular and Vue, discusses their advantages and drawbacks, and introduces Web Components—including custom elements, Shadow DOM, templates, slots, lifecycle callbacks, compatibility, and practical code examples—showing how they can complement or replace framework functionality.

Custom ElementsJavaScriptWeb Components
0 likes · 29 min read
Understanding Frameworks and Web Components in Frontend Development
360 Tech Engineering
360 Tech Engineering
Oct 14, 2019 · Frontend Development

Understanding and Using Shadow DOM: Concepts, Features, and Practical Examples

This article explains why Shadow DOM exists, introduces its core concepts and features, and provides step‑by‑step code examples for creating, styling, and defining custom elements with Shadow DOM, while also covering compatibility and best practices for modern frontend development.

CSSCustom ElementsJavaScript
0 likes · 11 min read
Understanding and Using Shadow DOM: Concepts, Features, and Practical Examples
Qunar Tech Salon
Qunar Tech Salon
Aug 23, 2019 · Frontend Development

Web Components: Can Native Custom Elements Replace Frontend Frameworks?

This article explains how modern Web Components—custom elements, Shadow DOM, slots, and native element extensions—provide a framework‑free way to build reusable UI, offering better performance, true CSS scoping, and progressive enhancement while discussing when abandoning traditional frameworks makes sense.

Custom ElementsFrontend DevelopmentJavaScript
0 likes · 26 min read
Web Components: Can Native Custom Elements Replace Frontend Frameworks?