Can I use native web components with CSUI?

I tried using Content Scripts UI (CSUI) with a native web component instead of a react component (see below), but I got a bunch of React errors in the browser console referring to a React component. Is there a way to make Plasmo work with native web components or something like Lit? Thanks.
import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"

export const config: PlasmoCSConfig = {
matches: ["https://www.plasmo.com/*"],
world: "MAIN"
}

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
document.querySelector(`[href="/#pricing"]`)

// Use this to optimize unmount lookups
export const getShadowHostId = () => "plasmo-inline-example-unique-id"

class PlasmoInline extends HTMLElement {
constructor() {
super();

const container = document.createElement('div');
container.style.borderRadius = '4px';
container.style.padding = '4px';
container.style.background = 'pink';
container.textContent = 'CSUI INLINE';

// Append directly to the element without shadow DOM
this.appendChild(container);
}
}

// Define the custom element
customElements.define('plasmo-inline', PlasmoInline);

export default PlasmoInline
import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"

export const config: PlasmoCSConfig = {
matches: ["https://www.plasmo.com/*"],
world: "MAIN"
}

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
document.querySelector(`[href="/#pricing"]`)

// Use this to optimize unmount lookups
export const getShadowHostId = () => "plasmo-inline-example-unique-id"

class PlasmoInline extends HTMLElement {
constructor() {
super();

const container = document.createElement('div');
container.style.borderRadius = '4px';
container.style.padding = '4px';
container.style.background = 'pink';
container.textContent = 'CSUI INLINE';

// Append directly to the element without shadow DOM
this.appendChild(container);
}
}

// Define the custom element
customElements.define('plasmo-inline', PlasmoInline);

export default PlasmoInline
6 Replies
Arcane
Arcane•4w ago
@tatsumaru has reached level 2. GG!
Sam
Sam•4w ago
Plasmo Docs
Life Cycle of Plasmo CSUI – Plasmo
Plasmo's CSUI orchestrates a lifecycle dedicated to mounting and unmounting your React, Vue, or Svelte components in a content script.
Sam
Sam•4w ago
I haven't tried using a web component, but I have a feeling these are the escape hatches you would use. I think the docs have examples with Svelte or Vue so that might be something helpful to look into.
Sam
Sam•4w ago
GitHub
examples/with-svelte at main · PlasmoHQ/examples
🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - PlasmoHQ/examples
GitHub
examples/with-svelte/contents/plasmo-inline.svelte at 4923b34eb8c89...
🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - PlasmoHQ/examples
tatsumaru
tatsumaru•4w ago
Interesting, thanks!
Sam
Sam•3w ago
No problem and I hope it works out.
Want results from more Discord servers?
Add your server