I have a page that imports a web component via HTML import:
<!DOCTYPE html>
<html>
<head>
<script src="/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script src="/@webcomponents/html-imports/html-imports.min.js"></script>
<link rel="import" href="/test-comp.html" />
</head>
<body>
<test-comp></test-comp>
</body>
</html>
This component imports its JavaScript with <script type="module" ...>:
<!DOCTYPE html>
<template id="template-test-comp">
<h1>Test Component</h1>
</template>
<script type="module" src="test-comp.js"></script>
When I load the page, nothing happens. The JavaScript part of the web component works, because when I change the script tag in the imported HTML to
<script type="application/javascript" src="test-comp.js"></script>
everything works (the headline is being displayed). Also, when I move the HTML template and the script tag to the main file, everything works:
<!DOCTYPE html>
<html>
<head>
<script src="/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script src="/@webcomponents/html-imports/html-imports.min.js"></script>
<template id="template-test-comp">
<h1>Test Component</h1>
</template>
<script type="module" src="test-comp.js"></script>
</head>
<body>
<test-comp></test-comp>
</body>
</html>
So, the problem seems to be that <script type="module" ...> does not work when the script is inserted the way webcomponents.js does it.
I am on Firefox on Windows (60.0.2), but I also have the same problem with Edge (42.17134.1.0).