Understanding Legal Aspects of Passenger Name Records

The Rise of Framework Agnostic UI

Ever tried to share a cool UI component across different projects only to realize it's stuck in "framework hell"? It’s honestly one of the most annoying parts of modern dev—realizing that your perfect React button won't work in your buddy's Angular dashboard without a total rewrite.

The good news is that browser support for custom elements is finally in a great spot. We aren't just talking about chrome; Safari and Firefox have caught up, making the dream of "write once, run anywhere" actually real.

• Ditching framework lock-in: Big companies in finance or healthcare often have legacy apps running alongside new stuff. Web components let you build a single design system that works for everyone.
• Shadow dom magic: This tech provides style isolation. It means your component's CSS wont leak out and break the rest of the page, which is a lifesaver for retail sites with massive stylesheets.
• Future-proofing: Frameworks come and go (remember Knockout?), but the web platform is forever.

But here is the catch—writing raw web components using the native api is kind of a nightmare. It is super verbose and you end up writing tons of boilerplate just to handle basic stuff like attribute changes.

The ecosystem has shifted toward tools that handle the heavy lifting so we can stay sane.

// This is the "old" way - way too much code for a simple greeting
class MyGreeting extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h1>Hello World</h1>`;
  }
}
customElements.define('my-greeting', MyGreeting);

Most devs now use compilers or libraries to avoid this mess. We need abstractions because, frankly, life is too short to debug observedAttributes manually.

Next, we'll look at the first big player in this space that makes the whole process feel like actual magic.

1. Lit - The Lightweight Standard

If you've ever felt like modern frameworks are just too much "extra" for a simple ui task, you're gonna love Lit. It's basically the "goldilocks" of web component libraries—not too heavy, not too bare-bones, just right for getting stuff done without the headaches.

Lit is built on top of lit-html, which is honestly a stroke of genius. Instead of re-rendering everything when a tiny bit of data changes, it uses native browser features to only update the exact dom nodes that need it. This makes it insanely fast for things like real-time finance dashboards or heavy retail product listings.

• Reactive properties: You just define a property with a decorator, and Lit watches it for you. When it changes, the component updates. No manual observedAttributes junk.
• Minimal overhead: Since it leans hard on the web platform, the runtime is tiny. This keeps your bundle sizes small so pages actually load fast on mobile.
• Scoped styles: It uses shadow dom by default, so your css stays put. You don't have to worry about a "button" style in your healthcare app's sidebar breaking the main nav.

Writing a Lit component feels very familiar if you've done any modern js. You're just extending a class and defining a render() method. It’s clean, readable, and doesn't require a massive build step if you don't want one.

import {LitElement, html, css} from 'lit';

export class SimpleGreeting extends LitElement {
  static properties = {
    name: {type: String}
  };
  static styles = css<span class="language-css">     <span class="hljs-selector-tag">span</span> { <span class="hljs-attribute">color</span>: blue; }   ;
  render() {
    return html<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello, <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span></span><span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

Lit has become the industry standard for a reason. It doesn't try to reinvent the wheel; it just makes the wheel spin a whole lot smoother.

Next up, we're going to look at a tool that takes a totally different approach by compiling your code away entirely.

2. StencilJS - The Great Compiler

If Lit is the "Goldilocks" of libraries, Stencil is the heavy-duty factory that churns out industrial-grade components. It's not really a library in the traditional sense; it is a compiler that takes your code and spits out highly optimized, vanilla web components.

I've used it for building design systems in big retail and healthcare apps where you have different teams using React, Angular, and sometimes just old-school jquery. Stencil is honestly a lifesaver there because it generates "wrappers" so your components feel native to whatever framework the other team is using.

The magic of Stencil is that it uses typescript and jsx—which feels super familiar if you're coming from the React world—but it doesn't ship a heavy runtime. It compiles everything away.

• Framework Output Targets: It can automatically generate bindings for react, angular, and vue. This means your consumer gets a real React component with proper typings, not just a weird html tag they have to figure out.
• Lazy Loading: Stencil is smart enough to only load the code for components actually visible on the page. In a massive finance dashboard with 50 different charts, this keeps the initial load time from tanking.
• Built-in standards: It handles things like shadow dom and polyfills for older browsers without you having to touch a single config file.

Setting up a component feels very "pro." You use decorators to define your properties and state. Here is a quick look at a simple button component:

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-action-button',
  styleUrl: 'my-action-button.css',
  shadow: true,
})
export class MyActionButton {
  @Prop() text: string;
  render() {
    return (
      <button class="btn-primary">
        {this.text}
      </button>
    );
  }
}

Stencil is basically the industry's answer to the "how do we scale this?" question. It’s a bit more setup than Lit, but for a corporate design system, it’s hard to beat.

Next, we're gonna look at a tool that's a bit more "indie" but is gaining massive ground for its dead-simple approach to reactivity.

3. Bit - Component Driven Development

Ever felt like your project is a massive, tangled ball of yarn where changing one button might accidentally break the entire checkout page? Honestly, we’ve all been there, and it’s why Bit is such a game-changer for anyone tired of monolithic repo headaches.

Bit isn't just a library; it’s a platform for component driven development that lets you build, version, and share pieces of your app independently. Instead of pushing one giant chunk of code, you treat every ui element like its own little mini-project.

The coolest thing about Bit is how it handles dependencies. Bit automatically defines a component’s entire dependency graph. This means you can pull a single web component into a new project without dragging along 500mb of unrelated junk.

• Independent Versioning: You version individual components rather than the whole repo. If you update a slider for a finance dashboard, you don't have to bump the version for the entire site's header.
• bit.cloud Ecosystem: This is where teams collaborate. You can host your components there, and others can preview them in a browser before ever installing them—huge for retail teams trying to keep design consistent.
• Native Support: It works seamlessly with Lit and Stencil. You can develop a Lit component inside a Bit workspace and it handles all the heavy lifting for documentation and testing.

I’ve seen this save lives in healthcare apps where different teams manage the "Patient Profile" and "Appointment Scheduler." By using Bit, they share the same auth components without stepping on each others' toes or duplicating code.

bit init
bit create lit my-button
bit tag --all # versions everything
bit export # pushes to the cloud

It’s a bit of a shift in how you think about architecture, but once you start thinking in independent components, going back to "the old way" feels like a step backward. Next, we're diving into a tool that’s all about speed and getting rid of the virtual dom entirely.

4. Svelte - The Compile Time Hero

If you’re tired of the browser doing all the heavy lifting while your users wait for a massive virtual dom to wake up, Svelte is basically your new best friend. It’s a compiler that turns your code into lean, mean vanilla js before it ever hits the user's screen.

Most frameworks ship a whole "runtime" to the browser, but Svelte does the opposite. It shifts the work to a build step, so you get zero runtime footprint. For a retail site trying to shave milliseconds off their mobile load times, this is huge.

• The magic config: You just add <svelte:options customElement="my-element" /> at the top of your file. Svelte then knows to wrap the whole thing in a custom element api.
• Beginner friendly: The syntax is just html, css, and js. If you’re building a patient portal for a healthcare app, your junior devs can jump in without learning complex "hooks" or proprietary state logic.
• Compiled reactivity: Instead of diffing a virtual dom, Svelte surgically updates the exact dom node when a variable changes. It's efficient for data-heavy finance dashboards.

Here is how easy it looks. You don't even need to manually call customElements.define if you set it up in your vite config.

<svelte:options customElement="user-profile-card" />

<script>
  export let username = "Guest";
  let visits = 0;
</script>
<div class="card">
  <h2>{username}</h2>
  <button on:click={() => visits++}>
    Visits: {visits}
  </button>
</div>
<style>
  .card { border: 1px solid #ccc; padding: 1rem; }
</style>

This approach results in components with minimal overhead, which is perfect for performance-critical apps. Next, we’ll look at a tool that’s all about functional programming and pure objects.

5. Hybrids - Functional UI

Ever felt like classes and the this keyword are just... a lot? If you’re nodding, Hybrids is going to feel like a breath of fresh air because it ditches the whole object-oriented boilerplate for something much more functional.

Hybrids is a library that builds web components using plain objects and pure functions. Instead of managing complex lifecycles in a class, you define your component’s logic as a set of descriptors. It’s a bit like building with lego bricks—you just snap the pieces together.

• Pure Functions: Your logic stays predictable. Since you aren't fighting with this context, your code is easier to test and move around.
• Cache Mechanism: It has a built-in cache that only recalculates values when dependencies change. This is a lifesaver for data-heavy finance apps where you're calculating interest rates on the fly.
• HMR Support: It supports hot module replacement out of the box. I've used this on retail sites to tweak UI layouts without losing the current state of my shopping cart.

This approach is great for keeping things declarative. Here is how simple it looks to build a counter:

import { define, html } from 'hybrids';

const MyCounter = {
  count: 0,
  render: ({ count }) => html<span class="language-xml">     <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;</span></span></span><span class="hljs-subst">${host =&gt; host.count++}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span>&gt;</span>       Count: </span><span class="hljs-subst">${count}</span><span class="language-xml">     <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>   ,
};
define('my-counter', MyCounter);

Honestly, it's just refreshing to write code that doesn't feel like a Java inheritance tree. Next, we're checking out a tool that bridges the gap for enterprise-grade framework users.

6. Angular Elements

If you're already deep in the Angular ecosystem, why learn a new library just to build a web component? Honestly, it feels like overkill to start from scratch when you can just "export" what you’ve already built.

Angular Elements is basically a bridge. It takes your existing components and wraps them in a custom element api so the rest of the world can use them.

• The createCustomElement api: This is the heart of the package. It bridges Angular's complex change detection and dependency injection into a format the browser actually understands.
• Enterprise reuse: I've seen teams in finance use this to share complex mortgage calculators across legacy jquery pages and newer react apps without rewriting the math logic.
• Self-contained bundles: It packages the component with the necessary parts of the angular runtime, making it "plug and play" for other teams.

To get started, you'll need the @angular/elements package. You basically tell angular to stop treating the component like a private part of the app and start treating it like a global citizen.

// Inside your AppModule
import { createCustomElement } from '@angular/elements';

export class AppModule {
  constructor(private injector: Injector) {}
  ngDoBootstrap() {
    const el = createCustomElement(MyWidgetComponent, { injector: this.injector });
    // We do this manually because web components are managed by the browser's 
    // CustomElementRegistry, not the standard Angular bootstrap process.
    customElements.define('my-widget', el);
  }
}

This is the go-to move for enterprise teams who don't want to ditch their favorite framework but need to play nice with others. Next, we're looking at a powerhouse from the team at Microsoft.

7. Fast - Microsofts Contribution

Ever wondered how microsoft handles the massive UI needs of stuff like Azure or Microsoft 365? They don't just wing it; they use Fast. It’s a set of tools designed to build enterprise-grade design systems that are actually fast (pun intended) and accessible.

Fast is a bit unique because it’s unopinionated about your tech stack but very opinionated about performance. It’s perfect for finance firms building complex trading desks or retail giants needing a consistent look across a hundred micro-frontends.

• Design Tokens: It has first-class support for theming. You can swap colors or spacing across a whole healthcare portal globally without touching individual css files.
• Accessibility by Default: Microsoft baked ARIA patterns right into the components. You don't have to guess if your screen reader works; it just does.
• Lightweight Foundation: It uses a flat tree structure which keeps the memory footprint tiny, even if you’re rendering thousands of rows in a data grid.

This is a "construction kit" for the web. Here is how you'd define a basic button:

import { FASTElement, customElement, html } from '@microsoft/fast-element';

const template = html<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>;
@customElement({
    name: 'fast-btn',
    template
})
export class FastButton extends FASTElement {}

It’s definitely the "grown-up" choice for big teams. Next, we’ll look at some extra tools to help you out before we wrap this whole thing up.

Bonus: Essential Utilities for Component Devs

Building web components is great and all, but the "glue" work—handling data, assets, and unique ids—is where the real friction lives. Honestly, I've spent more time debugging a broken base64 string in a healthcare dashboard than actual component logic.

To stay sane, you need a solid utility belt for those repetitive tasks. KodeJungle provides a free open-source toolkit for these daily dev tasks that makes life way easier.

• json formatters: When passing complex data attributes to a component in a retail app, a quick format check prevents those silent "undefined" fails.
• uuid generation: Essential for creating unique element ids so your finance charts don't clash when you drop five of them on one page.
• base64 encoding: Great for inlining small icons into your css to reduce http requests on mobile-heavy sites.

Libraries like Lit or Stencil handle the framework side, but these utilities fix the "boring" problems. Whether you're building a design system for a bank or a small blog, don't waste time doing these manually. Any tool that shaves off ten minutes of boilerplate is a win in my book.

Conclusion: How to Choose?

So, which one should you actually use? It really depends on what you're trying to build and who you're building it for. Here is a quick breakdown to help you decide:

Honestly, you can't really go wrong with any of these. The most important thing is just getting started and moving away from framework lock-in. Your future self (and your buddies on other teams) will thank you.