Should responsibility be shared in this situation?

Question

JavaScript

Good evening gentlemen.

I have a class - a component that:
1. Renders a form (Shadow DOM, style, etc.) (document.createElement ...)
2. Attaches event handlers to this form and its elements.
3. Handles the events of this form

And so, I terribly dislike that this class sort of "renders and works with the form", which fits under "single responsibility"
BUT at the same time only rendering (creating document.createElement elements, inserting styles and so on) takes up more than half of the class, and it seems like I want to create a separate class that will do this, and aggregate it from my component.

What is the best way to implement all this?
How not to go to extremes and not start to separate the excess? (can't feel that fine line)

Answer 1

You can try to make a factory.
The form creates itself and handles its own events. And calls constructors for child elements. And a separate class for each element. It renders itself and handles all events associated with that one element.

Answer 2

Composition. We take out large parts in a file. We use them in class. You can send me the code of your class by mail [email protected], I will subrefactor it with comments from my experience. I assume you are using react)