Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

External element scripts not loading #216

Closed
DavidSouther opened this issue Jul 24, 2013 · 10 comments
Closed

External element scripts not loading #216

DavidSouther opened this issue Jul 24, 2013 · 10 comments

Comments

@DavidSouther
Copy link

Referencing scripts using a src attribute for a script tag inside an element tag never loads.

my-element.html

<element name="my-element" attributes="name">
    <!-- Styles shadow dom correctly -->
    <link rel="stylesheet" href="my-element.css" />
    <template>
        <span>Hello {{name}}!</span>
    </template>
    <!-- In this configuration, Polymer will never load. -->
    <!-- No errors on console. -->
    <script src="my-element.js" type="text/javascript"></script>
</element>

my-element.js

Polymer.register(this, {
    nameChanged: function(){
    }
});

my-element.css

* {
    background-color: yellow;
}

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Polymer • Remote Load</title>
    </head>
    <body>
        <my-element name="David"></my-element>

        <script src="bower_components/polymer/polymer.js"></script>
        <link rel="import" href="my-element.html">
    </body>
</html>

Moving the script inside the script tag and removing the src attribute causes the example to behave correctly.

(Chrome Version 28.0.1500.71 on Fedora 19)
@sjmiles
Copy link
Contributor

sjmiles commented Jul 24, 2013

Script tags are not supported as direct children of <element>, move the tag outside of the element.

@DavidSouther
Copy link
Author

@sjmiles eg

my-element.html

<element name="my-element" attributes="name">
    <link rel="stylesheet" href="my-element.css" />
    <template>
        <span>Hello {{name}}!</span>
    </template>
</element>
<script src="my-element.js" type="text/javascript"></script>

No dice :(

@DavidSouther
Copy link
Author

If that did work or is supported behavior, that would imho be a very poor design choice.

The aesthetic I see of this is two-fold - the "MVC" of "Markup/Style/Script" is present, but separated by concern into individual files. At the same time, it's centralized in the markup itself, by an element containing a <link> for the style, a <template> for the markup, and a <script> for the controller.

@sjmiles
Copy link
Contributor

sjmiles commented Jul 24, 2013

Is my-element.js in the same folder as the import containing the my-element element? Paths are relative to the import.

Script tags as you show are supported and the tests are passing. If you are sure it's not working, we will need more information on your situation.

@DavidSouther
Copy link
Author

The four files are in the same directory, with content exactly as shown. They are served via python -m SimpleHTTPServer running in the same directory.

The test you mention is https://github.com/Polymer/HTMLImports/blob/stable/test/html/parser.html I presume?

Do I need to include the HTMLImports and CustomElement polyfills directly? I was under the impression that those were included in platform.min.js in the release.

@sjmiles
Copy link
Contributor

sjmiles commented Jul 24, 2013

The test you mention...

Yes. But I will run some more tests and see if I can repro your problem.

Do I need to include the HTMLImports and CustomElement polyfills directly

No, those are included in platform*.js.

@DavidSouther DavidSouther mentioned this issue Jul 24, 2013
Closed
@DavidSouther
Copy link
Author

PR27 on Platform is a test case that demonstrates the current state of this issue. It seems that while the script is loading and being run, the element never gets registered? Certainly, the registered callback doesn't get called, and visually the page never renders the element.

@sjmiles
Copy link
Contributor

sjmiles commented Jul 24, 2013

Remember this statement:

script tags are not supported as direct children of <element>, move the tag outside of the element

Your test is still attempting to use <script src> inside of <element>.

@DavidSouther
Copy link
Author

The error is the same in either commit.

What is the reasoning for not supporting script tags as a child of <element>? Not yet implemented, or as a design decision?

@sorvell
Copy link
Contributor

sorvell commented Sep 25, 2013

<element> has been removed from the spec so closing this issue.

If there is a related problem when using <polymer-element> please open another issue. Thanks.

@sorvell sorvell closed this as completed Sep 25, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@sorvell @sjmiles @DavidSouther