🧩 Plasmo Developers•2y ago

CSUI custom render function create default shadow DOM

I'm following this tutorial: https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer to make a custom renderer. However, I'm getting this error when the call to createRootContainer() is called (this should make the default shadow DOM:

ui.ts:51 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
    at injectAnchor (csui.ts:51:14)
    at createShadowContainer (csui.ts:67:3)
    at async Object.render (main.tsx:60:23)

ui.ts:51 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
    at injectAnchor (csui.ts:51:14)
    at createShadowContainer (csui.ts:67:3)
    at async Object.render (main.tsx:60:23)

What is the cause of this error and how can I create a default shadow DOM in a custom render function? Thanks!

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.

8 Replies

lab•2y ago

Hmm I think the createRootContainer is looking for an anchor (to mount the mutaionObserver into) that example prob need to be updated :d... - i.e user need to pass an anchor to the createRootContainer Just updated the docs

microbobOP•2y ago

Is it possible to make createRootContainer create the default shadow DOM without needing to write an overriding function?

lab•2y ago

yeah you use the built-in createRootContainer, just need to pass in an anchor to it the typing doesn't yield since it's laxxed out but the anchor should be required for that funciton ;d.... or perhaps we should just give it a default anchor?...

microbobOP•2y ago

Ok I'll take a look at this

Arcane•2y ago

@microbob has reached level 1. GG!

microbobOP•2y ago

The main reason I brought this up is that I'm trying to utilize the MUI library but the shadow DOM is blocking out the styling imported by the library. I'm following the Plasmo tutorial linked above along with MUI's tutorial on how to handle shadow DOMs (https://mui.com/material-ui/guides/shadow-dom/#1-styles) but it's not exactly working out. Do you happen to know the right resources or right things to override to let this work?

Shadow DOM - Material UI

The shadow DOM lets you encapsulate parts of an app to keep them separate from global styles that target the regular DOM tree.

lab•2y ago

MUI uses emotion - you can follow the mantine's guide to setup the emotion style cache check the examples repo, there's also been MUI related convo in this forum as well if iirc

microbobOP•2y ago

Ok cool, thank you!

Gaming

Programming

CSUI custom render function create default shadow DOM