Custom HTML Element In LWC

Question

In our company, we have a web application. We are using community which will be launched through that Web App. When the community is launched from the Web App, we have to align it according to the Web App Header. In simple words, we have to have same header as the Web App. Now the Web app dev team has provided me with this HTML code which I have to add to my community:

<Script src="some JS hosted outside SF"></script>
<cust-header></cust-header>

I used this code in the VF page and added that VF on the community. However, there is one menu item on the header which has submenus which opens up downwards like a dropdown. And I am not able to see those dropdown menu options as the VF is rendered as an iFrame and occupy a specific region. I tried adding z-index without any success. So I wanted to try it out with LWC to see if it works. Seems custom elements are not supported within LWC. So I tried using document.createElements and see if it works. But it seems the HTML code itself is not getting compiled. Below is my JS Code:

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import mchdr from '@salesforce/resourceUrl/mccheaderr';
export default class TestCommHead extends HTMLElement {
        constructor(){
                super();
                this.attachShadow({ mode: "open" });
                const span = document.createElement("cust-header");
                this.shadowRoot.appendChild(span);
        }
        
}
window.customElements.define("cust-header", TestCommHead); 

And the HTML code:

<template>
  <cust-header></cust-header>
</template>

Am I doing anything wrong here? Is there any alternative where I can use custom elements in LWC? Thanks for your help!

Answer 1

You cannot do several of the things you are attempting to do in Salesforce.

for starters, here is the official doc on including 3rd party libraries from SF LWC.

then, the only way to add children nodes to an element is with the lwc:dom="manual" directive.

As per using custom components:

Third-Party Web Components

To prevent security risks, you can’t use third-party web components on the Salesforce platform.

Web components are custom elements. To define a custom element, you must use the customElements.define API. However, this API is global, and allows you to globally register a component name. Registering a name globally is a security risk because an attacker could register any name and take over the page. Lightning Locker’s SecureWindow wrapper blocks the customElements methods that create custom web components.

The SecureWindow wrapper list in the Locker API Viewer tool shows that customElements is not supported.