BestHub
Sign in
Tag

Web Components

1 views collected around this technical thread.

Bilibili Tech
Bilibili Tech
Aug 30, 2024 · Frontend Development

Implementing a Cross-Page Playback Queue with Document Picture-in-Picture

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.

Cross-Page PlaybackDocument Picture-in-PictureFrontend Development
0 likes · 31 min read
Implementing a Cross-Page Playback Queue with Document Picture-in-Picture
HelloTech
HelloTech
Jul 16, 2024 · Frontend Development

Quark Design 2.0 Release: Extending Web Component Styling with ::part

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.

CSS ::partWeb Componentscomponent styling
0 likes · 5 min read
Quark Design 2.0 Release: Extending Web Component Styling with ::part
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 27, 2024 · Frontend Development

Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons

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.

Frontend ArchitectureWeb Componentsiframe
0 likes · 26 min read
Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons
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
Top Architect
Top Architect
Nov 27, 2023 · Frontend Development

Comprehensive Survey and Implementation Guide for File Preview Solutions

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.

File PreviewJavaScriptOpenOffice
0 likes · 23 min read
Comprehensive Survey and Implementation Guide for File Preview Solutions
IT Services Circle
IT Services Circle
Oct 10, 2023 · Frontend Development

How Adobe Brings Photoshop to the Browser: WebAssembly, Web Components, Service Workers, and AI Integration

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.

Adobe PhotoshopLitOPFS
0 likes · 12 min read
How Adobe Brings Photoshop to the Browser: WebAssembly, Web Components, Service Workers, and AI Integration
HelloTech
HelloTech
Aug 9, 2023 · Artificial Intelligence

AutoML in Hello's AI Platform and Quarkc: Building the Next‑Generation Front‑End Component Engine

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.

AI PlatformAutoMLConference
0 likes · 4 min read
AutoML in Hello's AI Platform and Quarkc: Building the Next‑Generation Front‑End Component Engine
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
HelloTech
HelloTech
Jun 26, 2023 · Frontend Development

Introducing Quarkc: A Framework‑Agnostic Web Component Toolkit

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.

Framework-agnosticJavaScriptOpen Source
0 likes · 6 min read
Introducing Quarkc: A Framework‑Agnostic Web Component Toolkit
Ctrip Technology
Ctrip Technology
Jun 1, 2023 · Frontend Development

Cross‑Platform Shared Web Components: Architecture, Implementation, and Host Integration

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.

Cross-PlatformFrontend DevelopmentMini Program
0 likes · 14 min read
Cross‑Platform Shared Web Components: Architecture, Implementation, and Host Integration
IT Services Circle
IT Services Circle
Mar 29, 2023 · Frontend Development

Top 10 Popular Frontend Open‑Source Projects from Tencent

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.

Mini ProgramOpen SourceTencent
0 likes · 8 min read
Top 10 Popular Frontend Open‑Source Projects from Tencent
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
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 30, 2022 · Frontend Development

Integrating Web Components into React Applications with a Custom Hook

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.

JavaScriptReactWeb Components
0 likes · 15 min read
Integrating Web Components into React Applications with a Custom Hook
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 25, 2022 · Frontend Development

Overview of Popular Web Components Frontend Frameworks

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.

Frontend FrameworksLitElementOmi
0 likes · 19 min read
Overview of Popular Web Components Frontend Frameworks
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 22, 2022 · Frontend Development

Publishing a Web Components Dropdown as an npm Package with Babel and Webpack

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.

BabelFrontend DevelopmentWeb Components
0 likes · 11 min read
Publishing a Web Components Dropdown as an npm Package with Babel and Webpack
GuanYuan Data Tech Team
GuanYuan Data Tech Team
Nov 10, 2022 · Frontend Development

How to Build Plugin‑Based Custom Charts with Web Components in a React Data Platform

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.

Custom ChartsEChartsFrontend Development
0 likes · 17 min read
How to Build Plugin‑Based Custom Charts with Web Components in a React Data Platform
政采云技术
政采云技术
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