SpreadJS Designer with WebComponent (Lit Elem): Shadow DOM Integration Concerns

SpreadJS Designer with WebComponent (Lit Elem): Shadow DOM Integration Concerns

Posted by: luisdaniel.madrigal on 4 June 2025, 12:49 pm EST

• 

  luisdaniel.madrigal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 June 2025, 12:49 pm EST

  Hello,

  At our company, we are evaluating SpreadJS for integration into one of our web-based products. I’m currently developing a proof of concept (POC), and our tech stack includes LitElement, TypeScript, and Webpack. We work with a monorepo setup and have multiple web components structured as independent modules.

  I’ve successfully created a web component that embeds the SpreadJS Designer using @mescius/spread-sheets-designer, and it’s working well overall. However, I ran into some issues related to Shadow DOM integration:

  In order to make the styles apply correctly, I had to disable Shadow DOM (by overriding createRenderRoot() to return this).

  I noticed that some DOM elements are being injected directly into the body, and certain events appear to be attached at the document level rather than scoped to the component.

  My question is:
  
  Is there a way to configure SpreadJS Designer to fully encapsulate all DOM rendering, styles, and event bindings within a specific container element (such as a wrapper div inside a Shadow Root), so that it plays nicely with the Shadow DOM model?

  This would help us better isolate the designer within our component structure and avoid global style or event pollution.

  Thanks in advance for your guidance!

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 5 June 2025, 4:30 am EST

  Hi,

  It appears that a duplicate case has been created: https://developer.mescius.com/forums/spreadjs/spreadjs-designer-with-webcomponent-shadow-dom-integration-concerns. We’ve already responded to it there—please have a look.

  Regards,
  
  Priyam