Test environment (npm run test:browser) behaves differently than real browser

Expected behavior

I'm trying to write a test to expose the bug explained here: https://github.com/ing-bank/lion/issues/2330 The bug is clearly reproducible when I try it manually. But when I try to expose this bad behavior as an automated test, it starts acting correctly.

Actual Behavior

Take this reproduction link: https://studio.webcomponents.dev/edit/CdTHK8iuVNqVSuive1NH/src/index.js?p=README.md

It contains this code snippet:

import { LionButton } from "@lion/ui/button.js";

customElements.define("lion-button", LionButton);

["lion-button", "button"].forEach((tagName) => {
  let counter = 1;

  const theButton = document.createElement(tagName);
  theButton.textContent = `This is ${tagName}`;
  document.body.appendChild(theButton);

  theButton.addEventListener("click", () => {
    console.log(`Hello from ${tagName} - ${counter}`);
  });

  theButton.click();
  counter += 1;

  theButton.setAttribute("disabled", "true");

  theButton.click();
  counter += 1;

  theButton.removeAttribute("disabled");

  theButton.click();
  counter += 1;
});

After running this code snippet, the normal button logs to the console 2 times, but the lion-button logs to the console 3 times. The normal button is behaving correctly and not handling clicks when its disabled.

Now look at the new test in this PR: https://github.com/ing-bank/lion/pull/2352

This is exactly the same code: https://github.com/ing-bank/lion/pull/2352/files#diff-7f84ff1242514e9bb95f64318f1da4b563b5af86287f2117585917210d75020a but it produces different result than in the browser
The issue is coming from this line: https://github.com/ing-bank/lion/pull/2352/files#diff-7bfdd444e5650854e7536869ef3973956e89fbfc8562197c7c13f99cfb3047bfR38 Note that I commented it out, and now the behavior in the test and in the browser are identical for this specific test.

Additional context

I guess the right approach is to remove that extra line (which imports @webcomponents/scoped-custom-element-registry), and instead every test that needs it, should import it independently. Importing it for all tests affects tests behavior (which is bad). It gives us false confidence that our components is working fine, but in the real world, not everyone is importing @webcomponents/scoped-custom-element-registry)

I'm cooking an MR for this :cook:

ing-bank / lion