How do I add material web components dynamically to the page?

[kartikwatwani]

I am building a browser extension's content script in which I am dynamically injecting bundle.js for material web components. I wish to add the fab button dynamically to a webpage using jQuery.

  $('body').append($(
    `<md-fab id="userContent_toggle_button" size="small" variant="primary" label="Swap"></md-fab>`
  ))

The above call shows the fab button in the webpage correctly If I call it before injecting bundle.js into the webpage.

However, later on, based on business logic I wish to append the fab button again. This time when I call .append, it doesn't show the FAB button. I feel this is happening because bundle.js checks only once for material design components when it is loaded. So, is there a way to load FAB again after bundle.js is already loaded into the webpage?

[Aworldc]

that's odd. try putting the material components into another file, include that bundle once, and then putting your logic in another file.

…

On Mon, Oct 23, 2023, 2:09 PM kartikwatwani ***@***.***> wrote: I am building a browser extension's content script in which I am dynamically injecting bundle.js for material web components. I wish to add the fab button dynamically to a webpage using jQuery. $('body').append($( `<md-fab id="userContent_toggle_button" size="small" variant="primary" label="Swap"></md-fab>` )) The above call shows the fab button in the webpage correctly If I call it before injecting bundle.js into the webpage. However, later on, based on business logic I wish to append the fab button again. This time when I call .append, it doesn't show the FAB button. I feel this is happening because bundle.js checks only once for material design components when it is loaded. So, is there a way to load FAB again after bundle.js is already loaded into the webpage? — Reply to this email directly, view it on GitHub <#5098>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AT3YVABLUH46XYGM5JF67MTYAXNXDAVCNFSM6AAAAAA6LMNZWKVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZVG43DKNJYG4> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[kartikwatwani]

I am first using rollup to create material-web.js for material components as a separate build process, then injecting material-web.js in the webpage using the <script> tag because importing material-web.ts(shown below) in the index.ts(using webpack to convert into js) is giving the error Cannot read properties of null (reading 'define')

material-web.ts

import '@material/web/fab/fab.js';
import '@material/web/icon/icon.js';
import '@material/web/fab/branded-fab.js';
import '@material/web/iconbutton/icon-button.js';

But injecting material-web.js via <script> in the DOM allows me to initialize only those FAB buttons that I add to the DOM before I inject <script> into the DOM. I am unable to add the FAB button later based on some logic, because it is not being loaded and is just present in dom as it is(shown below), The material web components library is not initializing it.

<md-fab id="userContent_toggle_button" size="small" variant="primary" label="Swap" style="position: absolute; top: 50%; right: 0px; color: white; z-index: 999999999;"></md-fab>

[kartikwatwani]

The issue was resolved. The website I was injecting the script into had a whole page load again when clicking the back button inside the web app but I felt just the route was being changed and some conditions prevented the material web components script from loading on the URL after the back button click. Thank you for the response @Aworldc.