[RFC] Change shadow dom define name

mrskiro commented 6 months ago

How do you envision this feature/change to look/work like?

I want to change the name of shadow dom named plasmo-csui

What is the purpose of this change/feature? Why?

Installing multiple extensions made with plasmo will cause inconvenience in element search.

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contribution

[X] I would like to contribute to this RFC via a PR

Verify canary release

[X] I verified that the issue exists in plasmo canary release

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems.

mrskiro commented 5 months ago

Self solved.

It was to define getRootContainer and reinvent the wheel with createShadowContainer.

Perhaps an option like getShadowHostName would be more useful. Like getShadowHostId.

drmanhatin commented 2 months ago

@mrskiro can you show me how you solved this?

Thanks in advance!

mrskiro commented 1 month ago

hi! @drmanhatin

In Plasmo, the naming of the shadow host is handled within the createShadowDOM function. https://github.com/PlasmoHQ/plasmo/blob/2885b2eecfcd21da95d20c740b6313663a5c398d/cli/plasmo/templates/static/common/csui.ts#L4

Therefore, you need to trace the function tree and prevent the call to createShadowDOM.

Currently, this can be prevented by overriding getRootContainer. However, this might lead to duplicating internal logic of Plasmo, which could be a concern... If possible, I recommend considering whether the requirements can be met by assigning an ID using getShadowHostId.

https://github.com/PlasmoHQ/plasmo/blob/2885b2eecfcd21da95d20c740b6313663a5c398d/cli/plasmo/templates/static/common/csui.ts#L308-L314

sample

// /contents/your-scripts.tsx

export const getRootContainer = ({anchor, mountState}) => {
// 1.  override create shadow dow function
  const shadowDom = await createYourShadowDOM()

  mountState?.hostSet.add(shadowDom.shadowHost)
  mountState?.hostMap.set(shadowDom.shadowHost, anchor)
// 2. If you want to keep the existing behavior, you need to repeat the plasmo implementation
  await injectAnchor(anchor, shadowDom, mountState)

  return shadowDom.shadowContainer
}

PlasmoHQ / plasmo