This article presents twelve practical methods—including BEM naming, CSS Modules, Shadow DOM, @scope, custom properties, and dynamic generation—to dramatically reduce CSS style collisions and achieve reliable style isolation in modern front‑end projects.
The article explains how Bilibili leveraged Chrome’s Document Picture‑in‑Picture API to create a cross‑page playback queue displayed in a small always‑on‑top window, detailing style synchronization, independent lifecycle handling via a helper class, and real‑time updates using BroadcastChannel‑plus‑iframe messaging while relying solely on native web features.
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 what micro frontends are, the problems they address, suitable application scenarios, key technical concerns such as communication, state management, sandboxing, routing, and pre‑loading, and compares popular implementations like nginx forwarding, pure iframe, qiankun, micro‑app, Module Federation, and wujie.
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 presents an extensive survey of file preview options—including commercial services, front‑end libraries, and server‑side converters—detailing their advantages, limitations, implementation steps, and code examples for handling DOCX, PPTX, XLSX, and PDF formats in web applications.
Adobe’s new web‑based Photoshop demonstrates how modern browser APIs—such as WebAssembly, OPFS, Service Workers, Lit‑based Web Components, and TensorFlow.js—enable a complex, graphics‑intensive application to run efficiently across platforms while offering AI‑powered features and future‑proof performance optimizations.
At the 2023 SECon Global Software Engineering Innovation Summit in Shanghai, Hello’s technology team will showcase how its AI platform leverages AutoML to streamline model development across intelligent mobility services, and how the Quarkc engine uses Web Components to create cross‑stack, framework‑agnostic front‑end components.
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.
Quarkc, the HelloBike‑developed framework‑agnostic web component toolkit, builds native Web Components without hidden magic, letting developers write once and run anywhere across Vue, React, Svelte, Angular and plain HTML, while offering a tiny bundle size, high performance and simple npm‑based setup.
This article introduces Tencent’s two open‑source front‑end frameworks—wujie, a micro‑frontend solution built on Web Components and iframes, and Omi, a cross‑framework, cross‑platform library—detailing their core concepts, key features, and where to find their source code.
This article describes a cross‑platform solution that enables a single set of Web component code to be shared across Native, React Native, and mini‑program environments by leveraging Web Components, environment‑aware builds, and bridge communication, thereby reducing development effort and accelerating release cycles.
This article surveys Tencent's ten most popular frontend open‑source projects, describing each library or framework, its key features, typical use cases, and providing GitHub links with star counts to help developers discover valuable tools for web, mobile, and mini‑program development.
This article explains Cloudflare’s new Fragments Architecture for micro‑frontends, detailing how parallel, streaming responses from Workers eliminate common bottlenecks, provide eager interactivity, improve security, and achieve extreme first‑paint performance through innovative fragment hosting and communication mechanisms.
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 tutorial demonstrates how to use a previously built Web Components dropdown inside a React app, covering the creation of an abstraction layer, proper prop handling, event registration, and a reusable custom Hook that formats data and manages listeners.
This article introduces and compares eight major Web Components frameworks—Stencil, Omi, Slim.js, Polymer, hybrids, X‑Tag, LitElement, and direflow—detailing their features, installation commands, code examples, and practical considerations to help developers choose the most suitable tool for building reusable, standards‑based UI components.
This tutorial explains how to package a custom Web Components dropdown, publish it to npm using either Babel or Webpack, and then integrate the published component into a React application, covering project setup, configuration files, build scripts, and deployment steps.
This article explains why a data‑analysis platform needs a plugin architecture for custom charts, compares iframe‑based and Web Components approaches, shows how to implement a lightweight ECharts‑based chart plugin, and provides step‑by‑step code samples and technical selection criteria for frontend developers.
This article provides a comprehensive overview of Lit, covering its core concepts, key features, decorators, templating, styling, slots, event communication, lifecycle, directives, mixins, controllers, SSR support, and the surrounding ecosystem, offering practical code examples for developers.
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.
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.
This article provides a comprehensive introduction to micro frontends, explaining their definition, benefits such as independence and scalability, detailing various implementation approaches like iframe, Module Federation, EMP, single‑spa, qiankun, icestark, garfish, Fronts and Web Components, and outlining the essential framework functions and suitable scenarios.
Web Components provide native, reusable HTML elements with Shadow DOM isolation, delivering lower CPU and memory usage than frameworks like React, and are increasingly adopted by companies such as Twitter, YouTube, and Adobe, offering performance, maintainability, and reduced vendor lock‑in for modern frontend development.
This article explains micro‑frontend architecture, its benefits over monolithic frontends, the challenges of parent/child integration, and practical implementation approaches on AWS, including web‑component and module‑based integration with code examples and deployment considerations.
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.
Today's roundup introduces IceJS's new Electron scaffold, warns about malicious code in faker.js and colors.js, showcases the upcoming Vue.js documentation, highlights the Haunted web‑components library, compares Turborepo with Nx, presents Microsoft’s lage task runner, and explains TypeScript covariance and contravariance concepts.
This article explains how Kraken, a high‑performance Web rendering engine, integrates Flutter widgets as custom elements, detailing the component architecture, registration process, rendering pipeline, adapter mechanisms, and advanced use cases such as optimizing waterfall‑flow performance for seamless hybrid Web‑Flutter applications.
This article explains how to integrate Flutter widgets into the Kraken web rendering engine as custom elements, detailing the architecture, rendering pipelines, code examples, and advanced scenarios such as waterfall‑flow optimization to achieve dynamic, high‑performance, and easily extensible front‑end applications.
This article examines why Web Components are gaining traction—covering industry adoption trends, native technical benefits like performance and isolation, reduced business costs, and how they complement rather than replace existing frontend frameworks.
This article explains why Web Components are gaining traction, outlines their technical and performance advantages over frameworks like React, and highlights the business and security benefits of adopting native, framework‑agnostic components for modern web development.
Quake is an open‑source, extensible knowledge‑management meta‑framework that combines Markdown, Git versioning, and Web Components to let developers store, query, and visualize diverse data types via a CLI‑driven workflow, with future plans for richer UI and custom syntax.
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 how to replace a heavy 78 KB GIF loading animation with the lightweight Fancy-Components wave‑filter web component, covering its installation, configuration, and usage in plain HTML, React, Vue 2, Vue 3, Vue‑CLI, Vite, and custom attribute options such as color, duration, amplitude, delay, mode, and interval.
This article explains Taro 3's shift from a compile‑time heavy architecture to an interpretive runtime, detailing its JSX compilation drawbacks, the new runtime design that supports multiple frameworks, the implementation of a custom React reconciler, Web Components via Stencil, and how these changes improve cross‑platform development performance and flexibility.
This article surveys recent advances such as running Node.js directly in the browser with WebContainers, GitHub's large‑scale adoption of Web Components, the principles of Clean Architecture, the zx shell‑script tool, and a product‑reliability "3+1" evaluation method.
The article reviews Vue 3's official release, explains the Teleport feature for rendering content outside component trees, introduces the lightweight vue‑lit library for building Web Components with Vue's reactivity, and highlights related graphics experiments, legacy version comparisons, and Taro integration for mini‑program development.
The article traces the rise of micro‑frontends from a solution to monolithic admin panels, explains their architectural benefits and various implementation options, and details Xiaoju Car Service’s Midway platform built on single‑spa with lifecycle hooks, sandboxing, idle‑time preloading, IndexedDB caching, and a unified login system.
This article explains how NetEase Yanxuan tackled the high maintenance cost and visual inconsistency of multiple front‑end stacks by designing a cross‑framework component architecture based on Web Components, detailing the technical selection, layered design, implementation challenges, and the resulting efficiency and isolation benefits.
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 explains the micro‑frontend concept, why large single‑page applications need it, evaluates existing approaches like iframes and web components, and presents Outbrain's solution with independent deployment, testing, runtime isolation, shared resources, and communication strategies.
The article introduces Tencent’s open‑source Omi framework, a next‑generation frontend solution built on Web Components that enables developers to write code once and deploy it across desktop web, mobile H5, and various mini‑program platforms, highlighting its features, setup commands, debugging tools, and React‑to‑Omi component conversion.
Learn how to create reusable, encapsulated UI components using Web Components by building a simple counter element with Custom Elements, Templates, Shadow DOM, properties, events, and attributes, and see how to integrate it into any framework, handle data binding, and dispatch custom events.
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 explores the evolution of web componentization from the early template era to modern SPA frameworks, explains why component-based development is essential, and presents practical design ideas such as treating components as finite state machines with atomicization and event‑driven interactions.
This article introduces Shadow DOM, explains its purpose for encapsulating HTML elements into reusable sub‑trees, compares its benefits over traditional approaches like Bootstrap, and provides a practical example with code demonstrating how to create and use a Shadow DOM in modern browsers.
A series of internal technical talks covers engineering Node.js development and operations, fast SEO and watcher solutions, native module creation, code elegance principles, rapid Chrome plugin development, and the future of web componentization, inviting staff to attend on September 19.
This article reviews the latest AngularJS 1.3 release, explains why a major rewrite was needed for Angular 2.0, and details the new language AtScript, dependency‑injection improvements, component model, Web Components support, and other design decisions shaping modern frontend development.
