Disable <div data-wxt-integrated /> wrapper

[wailay]

I am rendering a content script component using react

 const ui = createIntegratedUi(ctx, {
      position: "inline",
      anchor: () => document.querySelector("my-selector"),
      onMount: (container) => {
        const wrapper = document.createElement("div");

        wrapper.className = "my-container";
        container.append(wrapper);

        const root = ReactDOM.createRoot(wrapper);
        root.render(
          <MyUI />
        );
        return { root, wrapper };
      },
      onRemove: (elements) => {
        elements?.root?.unmount();
        elements?.wrapper?.remove();
      },
    });

But it gets wrapper into automatically created div data-wxt-integrated which messes with the container styling. Is there a way to disable this behaviour?

<div data-wxt-integrated="">
       <div class="my-container"></div>
</div>

[wailay]

https://github.com/wxt-dev/wxt/blob/2cf2582138b8863208d52a2b46a7df374bba6217/packages/wxt/src/utils/content-script-ui/integrated.ts#L15C1-L16C51

Would there be a way to override that wrapper and allow the user to provide their own?

[wailay]

The issue I was having with this pre-defined wrapper is that I can't apply styling to it.
I have a simple workaround for this, to provide a custom tag for the wrapper:

const sidebarUI = createIntegratedUi(ctx, {
      position: "inline",
      tag: "custom-tag",
     onMount: (container) => {
          const customTagWrapper = document.getElementsByTagName("custom-tag");
          customTagWrapper[0].classList.add("your-styling-container");

          // .... Render element 

}

[marcellino-ornelas]

@wailay adding classes to the container didn't work for you 🤔 Should just be a normal div that you can add styling too unless your using a shadow DOM which I can see why that wouldn't work

container.classList.add("your-styling-container");