Understanding Frameworks and Web Components in Frontend Development

Why Use a Framework?

For modern frontend developers, adopting a framework is essential for efficient development. The most popular frameworks in China are Vue, React, and Angular, each with distinct characteristics that explain their market dominance.

Understanding Frameworks

Beyond using a framework to handle business logic efficiently, developers should also understand the framework itself to improve learning and application. The table below summarizes the viewpoints of Evan You (creator of Vue) on the three major frameworks.

Framework

Features

Drawbacks

React

Bottom‑up design, closer to native APIs

Highly flexible; provides only low‑level primitives, enabling any complex system

Small responsibility scope reduces maintenance overhead for teams

Solving complex problems with simple concepts often requires extra research because documentation does not map every component to a solution.

Angular

Top‑down design that anticipates all possible user problems at the outset

Abstract concepts solve problems without additional research, as the framework does it for you

Consistent design ensures framework and solution stay aligned, allowing development directly from docs

Higher learning cost due to broader responsibility scope

If a built‑in method is not optimal for a case, finding an alternative can be difficult

Introducing new low‑level ideas is harder because the framework enforces strict consistency

Vue

Responsibility scope sits between React and Angular

Low learning barrier

Focuses developers on building features rather than learning unused concepts

Being a middle ground means it inherits some drawbacks of both React and Angular, such as a slightly higher learning cost compared with React.

Significance of Responsibility Scope:

Large responsibility scope encourages developers to delegate problems to the framework.

Small responsibility scope encourages developers to seek solutions from the community.

Framework Advantages

Despite differences, all frameworks share common goals: they are built on native APIs, aim for higher efficiency, better performance, and smoother cross‑browser compatibility. They abstract away manual DOM manipulation, data binding, and platform differences, raising the lower bound of developer productivity.

Using React and Vue as examples, their advantages include:

Data binding (one‑way / two‑way)

Component‑based development (hooks, lifecycle, scoped isolation)

Virtual DOM diffing and routing

…

These advantages stem from native features such as Object.defineProperty evolving to Proxy, which rely on JavaScript syntax and browser support. Therefore, browsers and their native APIs are the ultimate foundation, not the frameworks themselves.

Frameworks also introduce two inevitable drawbacks:

Performance overhead (e.g., React vs. plain JS DOM manipulation benchmarks shown in the images).

Environment isolation (e.g., Vue component libraries may not integrate smoothly with a React project).

When native APIs can provide similar functionality, they may replace parts of a framework while preserving performance and cross‑platform compatibility.

Introducing Web Components

What Are Web Components?

Web Components are a set of native browser APIs that enable reusable, encapsulated custom elements. They address code reuse, custom UI, and component management, essentially providing the same capabilities that frameworks offer through native means.

Although powerful, Web Components alone cannot completely replace frameworks because frameworks also supply ecosystems (routing, state management, performance optimizations, etc.). When native browsers eventually adopt most framework ideas, the next generation of frameworks may become slimmer.

Can Native Componentization Replace Framework Componentization?

Componentization characteristics include high cohesion, low coupling, clear markup, and extensible interfaces. Frameworks already provide these features, but Web Components can achieve them natively.

What Web Components Offer

Custom Elements : Define independent elements with their own lifecycle and attribute observation.

Shadow DOM : Encapsulate markup, style, and behavior, preventing global CSS/JS interference.

HTML Templates : Use <template> and <slot> for content distribution, similar to Vue slots or React children.

Vue 3.2 already provides experimental support for Web Components.

Compatibility

Check browser support via caniuse.com . The three core APIs—Custom Elements, Shadow DOM, and HTML Templates—have varying support across desktop, tablet, and mobile browsers (see the screenshots).

Using the Web Component API

Declaring and Using Custom Elements

The main interface is CustomElementRegistry, accessed via window.customElements. The define method registers a new element with three parameters: name (must contain a hyphen), constructor class, and an optional options object for extending built‑in elements.

js:
... 
customElements.define('custom-elements', class);

html:
<body>
  ...
  <custom-elements></custom-elements>
  ...
</body>

js:
... 
customElements.define('custom-elements', class, { extends: 'p' });

html:
<body>
  ...
  <p is="custom-elements"></p>
  ...
</body>

After registration, you can create instances via document.createElement or directly in markup.

Custom Element Lifecycle

constructor : Runs when the element is created (either via createElement after registration or when appended if registration occurs later).

connectedCallback : Invoked when the element is added to the document.

attributeChangedCallback : Fires when observed attributes change; requires a static observedAttributes getter.

adoptedCallback : Called when the element moves to a new document (e.g., via an iframe).

disconnectedCallback : Runs when the element is removed from the document (not triggered on tab/window close).

class CustomEle extends HTMLElement {
  constructor() {
    super();
    console.log('constructor executed');
    // ...
  }
  connectedCallback() {
    console.log('connectedCallback executed');
  }
  static get observedAttributes() { return ['img', 'text']; }
  attributeChangedCallback(name, oldValue, newValue) {
    console.log('attributeChangedCallback', name);
    // handle attribute changes
  }
}
customElements.define('custom-ele', CustomEle);

Shadow DOM Usage

Attach a shadow root with element.attachShadow({ mode: 'open' | 'closed' }). An open mode allows external access via element.shadowRoot; closed hides it.

class CustomEle extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    // build shadow DOM here
  }
}
customElements.define('custom-ele', CustomEle);

Inside the shadow tree you can create normal DOM nodes, apply styles, and use slot elements for content projection.

Templates and Slots

The <template> element holds markup that is not rendered until cloned. Combined with slot, it enables flexible content distribution.

class CustomEle extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const tmpl = document.getElementById('my-paragraph');
    if (tmpl) {
      shadow.appendChild(tmpl.content.cloneNode(true));
    }
    const slot = document.createElement('slot');
    slot.name = 'extra';
    shadow.appendChild(slot);
  }
}

Other Useful APIs

window.customElements.get(name)

: Retrieve the constructor for a registered element. window.customElements.upgrade(node): Upgrade a pre‑created element after its definition. window.customElements.whenDefined(name): Returns a promise that resolves when the element is defined.

Related Libraries and Resources

webcomponents.org – examples and tutorials.

Hybrids – functional API for creating custom elements.

Polymer – Google’s library with polyfills and utilities.

Snuggsi.es – lightweight Web Components library (~1 KB).

Slim.js, Smart.js, Stencil – various libraries for authoring Web Components.

References

MDN Web Docs – Web Components

Medium article – The Anatomy of Web Components

阮一峰的博客 – Web Components

WHATWG HTML Spec – Custom Elements

Google Developers – Web Fundamentals: Web Components

Performance comparison of React vs. native DOM