Ajax Calls From Imported External Web Components in PWAs

programming web dev
1

Hi,

I have many web components that are located in different servers. They all get combined in one master ui that uses these web components. The problem is, the Ajax calls from these external web components that get imported will get called from the master ui app and not the web component external URL/host.

Can I make it so that the web components imported uses their remote host and not the local host of the importee when used?

2

If anyone wants to know how I found a way its by getting the script module src url and using that to call external calls from imported web components.

3

TBH, I’m not fully sure what you are describing. Won’t the URL for the Ajax call be hard-coded to your component? Or do you have it somehow inferring its value based on where it is hosted?

4

@kirupa please take a look at the following example:

( function ( path ) {
    var baseUrl = path.slice( 0, path.lastIndexOf( '/' ) )
    customElements.define( 'kirupa-web-component', class extends HTMLElement {
        constructor() {
            super()
            this.attachShadow( { mode: 'open' } )
                .innerHTML = `<img src="${baseUrl}/image.png">`
        } 
    } )
} ) ( document.currentScript ? document.currentScript.src : import.meta.url )