BUG: No id for elements not having styles but with script, which results in script not running for those elements

[padcom]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome latest

Reproducible demo link

https://github.com/padcom/grapesjs-no-id-for-element-example

Describe the bug

When creating custom GrapesJS components, if those components have the script() (runtime behavior for component) and no styles are being applied to that component then the root element doesn't have the id attribute which then fails the document.querySelectorAll('#<id-goes-here') and the runtime script is not called.

In the given example, I have created a special custom element, called <content-preview> (https://github.com/padcom/grapesjs-no-id-for-element-example/blob/master/preview.ts) so that I can present the issue on one page. Here are the reproduction steps:

1. Clone the repository (https://github.com/padcom/grapesjs-no-id-for-element-example)
2. npm install
3. npm start
4. Navigate to http://localhost:5173
5. Drop the example block on to the canvas
6. Open console

Current result:
You will see in the console just one log stating that the component has been initialized inside the <iframe>

Expected result:
You will also see in the console a log stating that the component has been initialized inside the page

7. Change any style on the component

This will automatically generate the id for that element, because styles need to have a reference to something which in turn allows the initialization script to also find the component and the initialization message that was previously missing appears in the console.

As a workaround, one can render the containing element with the id attribute manually. This, however, will only render those attributes that have been specifically mentioned in the toHTML() method, so it is a weak solution. It'd be much better if when filtering out attributes such as id GrapesJS would take the script element into account and preserve the id in the final HTML output generated by getHtml(). This is shown in https://github.com/padcom/grapesjs-no-id-for-element-example/blob/master/main.ts#L22

Code of Conduct

• I agree to follow this project's Code of Conduct

[artf]

The issue is caused by the use of jsInHtml: false and how the internal JS generator is handled.
I'll try to fix it for the next release.