adam bien's blog

In this screencast:

...I extended the https://github.com/AdamBien/bce.design vanilla Web Components quickstarter with two additional routes.

import './bookmarks/boundary/Bookmarks.js';
import './bookmarks/boundary/List.js';

import 'http://localhost:8080/MicroHello.js'
import 'http://localhost:8282/MicroHello.js'    

//...
const router = new Router(outlet);
router.setRoutes([
    {path: '/',     component: 'b-list'},
    { path: '/add', component: 'b-bookmarks' },
    { path: '/a', component: 'a-micro-hello' },
    { path: '/b', component: 'b-micro-hello' }
    
]);

The a-micro-hello and b-micro-hello custom elements were loaded from an external "micro frontend" / "micro service":

class MicroHello extends HTMLElement {

    constructor() {
        super();
        this.creationDate = new Date();
        this.message = 'hello from micro-b';
    }

    connectedCallback() {
        this.innerHTML = `
           <h2>${this.message} ${this.creationDate}</h2>
        `;
    }
}
customElements.define('b-micro-hello',MicroHello);