How do JS modules prevent custom elements defined inside from exposing their APIs?
The problem is that a <script type="module">
implicitly has a defer
attribute, so it doesn't run immediately.
Even though I define callMe in a class scoped to the module, this class method should be accessible outside of the module
Yes, it is. The problem is just that it is defined asynchronously :-) To use stuff from a module, you should explicitly import
that module to declare the dependency, which makes sure it is evaluated in the right order. It would also work if your global script was defer
red somehow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title></title>
<script type="module" src="./wtf.js"></script>
</head>
<body>
<script type="module">
import './wtf.js';
// ^^^^^^^^^^^^^^^^^^
const myElement = document.createElement('my-element')
document.body.appendChild(myElement)
myElement.callMe()
</script>
</body>
</html>