Skip to content
This repository was archived by the owner on Sep 20, 2019. It is now read-only.
This repository was archived by the owner on Sep 20, 2019. It is now read-only.

script type=module not working in HTML import #957

@dtanzer

Description

@dtanzer

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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions