0 views collected around this technical thread.
Quark Design 2.0 introduces ::part support, enabling developers to style any internal part of a Web Component’s shadow DOM from outside—surpassing the previous reliance on limited CSS variables—while remaining fully backward‑compatible, cross‑framework, and demonstrated via a live StackBlitz example.
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.
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.
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.
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.
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.
This article explains how to build a CSS sandbox for Qiankun micro‑frontends by using Shadow DOM for strict style isolation and a Scoped CSS approach for experimental isolation, providing step‑by‑step code examples, underlying principles, and a final Web Component implementation.
This article explains various web watermark methods—including simple visible logos, full‑page overlays, dynamic canvas‑generated marks, SVG‑based text watermarks, and robust invisible (blind) watermarks—while covering implementation details, security considerations, and protection mechanisms such as Shadow DOM and MutationObserver.
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.
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.
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.
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.
This article explains the concept of micro‑frontend, compares common implementation approaches such as dynamic module loading and browser sandboxing, details the use of Shadow DOM and Proxy for isolation, introduces frameworks like qiankun and hot‑chocolate, and describes an application platform that streamlines build, upload, and release workflows for complex front‑end projects.
This article explores methods to prevent user-injected JavaScript from manipulating DOM objects, including using Shadow DOM and Web Workers to create secure sandboxed environments.
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.
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.
This article introduces the fundamentals of Shadow DOM, explains its core concepts, usage patterns, key features, and API, compares it with Virtual DOM, demonstrates practical code examples for creating and styling shadow roots, handling slots and events, and discusses browser support and related tooling.
This article explains how Progressive Web Apps (PWAs) and Accelerated Mobile Pages (AMP) can be combined, compares their strengths and limitations, and provides practical integration patterns such as AMP-as-PWA, AMP-to-PWA, and AMP-in-PWA, including service‑worker setup and shadow‑DOM techniques.