Use JS events instead of Drupal.behaviors

Still relevant today. "DOM is slow and has a lot of overhead." this is not true anymore, the DOM is fine.

In 📌 Use webcomponents for dropbutton Needs review , @nod_ said "with webcomponents we don't need behaviors or once".

And @brianperry shared about "html web components", components that add behaviors to mostly existing markup and don't use the shadow dom.

So, i droppped this comment:

Such an interesting issue! Replacing all Drupal behaviours by WebComponents looks exciting: one less Drupalism & better performance.

Is it possible to do the same with "normal" markup instead of a custom element? Leveraging the is attribute and using the web component only as an (efficient) behaviour bag:

<div is="drupal-dropbutton" class="dropbutton-wrapper dropbutton-multiple">
<div class="dropbutton-widget">
<!-- ul, li, li, li, li -->
</div>
</div>

Advantages:

• faster to convert the renderable once the JS is updated, just replace data- attributes by the is attribute
• even faster rendering because server-side goodness
• no accessibility issues because we are back to good old markup
• Selenium may prefer this one :)

Unfortunately, Safari would need a polyfill for now.

@pdureau in your example above, what would the javascript look like. How would it use the "is" attribute?

For this example:

<div is="drupal-dropbutton">...</div>

The JS will look like that:

class Dropbutton extends HTMLDivElement {
  // Logic & events
}
customElements.define('drupal-dropbutton', Dropbutton) ;

I have not tested this yet, but the idea is to keep the server side rendering of the usual HTML markup, and use the web component class has a behaviour container, with a lifecycle managed by the browser instead of custom scripts.

Ah, custom elements. If you're using custom elements, have you considered using Custom Events?

See: https://www.youtube.com/watch?v=wmGmKSLfVCY

This approach attempts to bubble up events from within a custom element, while also ensuring you have control over preventing events within the element from bubbling up.