Multiple shadow DOM trees with same select2 ids not working correctly

[sergotail]

Hi, i encountered issue similar to #5682, but for multiple shadow DOM subtrees having select2 elements. I have a custom element, and i initialize select2 for elements inside shadow DOM, in connectedCallback. And when i add second, third and so on custom elements, all select2 forms nested in existing custom elements are become broken.

I found that this code is executed when i add new select2 inside newly created shadow DOM:

if (Utils.GetData($element[0], 'select2') != null) {
  Utils.GetData($element[0], 'select2').destroy();
}

I think it's a major bug, because reused web components scenario is not a rare one.

JS Bin example

select2 version: 4.0.13
jQuery version: 3.5.1
bootstrap version: 4.6.1

[sergotail]

One of the possible solutions is to add root option to options with value of a jQuery object or null. And when user creates select2 from within shadow DOM, he can pass shadow DOM host element with root key in options to unify elements between shadow DOM subtrees and light DOM.

But this requires a data storage refactor to store data per roots as well.

[kevin-brown]

Are shadow DOMs allowed to have duplicate IDs? I know that the root DOM object isn't allowed to have duplicate IDs per the HTML spec, but I'm not super familiar with the rules around shadow DOMs.

[sergotail]

There are no duplicate IDs allowed within single shadow DOM tree, but it's ok to have the same IDs between different shadow DOM trees, this is an incapsulation feature of shadow DOM for convenient development of reusable web components.