问题
I've been trying to use a custom element for a paper-dialog popup that I want to use. If I set up a test page within the file the custom element is defined in, using all the same imports as my index, it works. If I import the custom element into any other page, it no longer works. Even if I load the test file that does work into a div on another page, it gives me the error Uncaught Error: You tried to use polymer without loading it first. To load polymer, <link rel="import" href="components/polymer/polymer.html">
I definitely have the polymer.html import in my custom element file. Even if I take the custom element and define it in my index, exactly the same code from the external test, it returns this error. I don't understand why and I've searched extensively. Does anyone know why?
Here's the code for my custom element:
<polymer-element name="share-dialog" attributes="pageid, post">
<template>
<paper-dialog backdrop autoCloseDisabled id="overlay" transition="paper-dialog-transition-bottom" heading="Share">
Long-press, highlight and copy: <br>
<center><paper-input id='share_box'type='text' name='share' value='xxxxx/index.php?page=news&id={{pageid}}&post={{post}}'></paper-input></center><br>
<center>
<paper-button core-overlay-toggle raised>Close</paper-button>
</center>
</paper-dialog>
</template>
<script>
Polymer('share-dialog', {
toggle: function() {
this.$.overlay.toggle();
}
});
</script>
</polymer-element>
Obviously I use an actual url in that input box, just for the sake of privacy I've edited that out.
These are my imports:
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.js">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-icons/social-icons.html">
<link rel="import" href="bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="bower_components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-style/core-style.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="import" href="bower_components/paper-progress/paper-progress.html">
<link rel="import" href="bower_components/core-transition/core-transition.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog-base.html">
<link rel="import" href="bower_components/paper-elements/paper-elements.html">
<link rel="import" href="bower_components/core-overlay/core-overlay.html">
No error is thrown until I try to call <share-dialog></share dialog>
回答1:
You're including polymer.js and polymer.html. You should only include polymer.html.
回答2:
Sounds strange. When I made a plunker using your above example it works -
http://plnkr.co/edit/Gd84hbHTct9ht94acC1N?p=preview
The only reference I had to include that isn't in your code above was in the index.html page
I also removed a reference to polymer.js which isn't needed here
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="share-dialog.html">
</head>
<body>
<share-dialog id="myDialog"></share-dialog>
<button onclick="showDialog()">Show</button>
<script>
function showDialog() {
document.getElementById("myDialog").toggle();
}
</script>
</body>
</html>
share-dialog.html
<link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/components/core-icons/core-icons.html">
<link rel="import" href="https://www.polymer-project.org/components/core-icons/social-icons.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-spinner/paper-spinner.html">
<link rel="import" href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="https://www.polymer-project.org/components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="https://www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="https://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="https://www.polymer-project.org/components/core-style/core-style.html">
<link rel="import" href="https://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-fab/paper-fab.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-tabs/paper-tabs.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-toast/paper-toast.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-progress/paper-progress.html">
<link rel="import" href="https://www.polymer-project.org/components/core-transition/core-transition.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-dialog/paper-dialog-base.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-elements/paper-elements.html">
<link rel="import" href="https://www.polymer-project.org/components/core-overlay/core-overlay.html">
<polymer-element name="share-dialog" attributes="pageid, post">
<template>
<paper-dialog backdrop autoCloseDisabled id="overlay" transition="paper-dialog-transition-bottom" heading="Share">
Long-press, highlight and copy:
<br>
<center>
<paper-input id='share_box' type='text' name='share' value='xxxxx/index.php?page=news&id={{pageid}}&post={{post}}'></paper-input>
</center>
<br>
<center>
<paper-button core-overlay-toggle raised>Close</paper-button>
</center>
</paper-dialog>
</template>
<script>
Polymer('share-dialog', {
toggle: function() {
this.$.overlay.toggle();
}
});
</script>
</polymer-element>
来源：https://stackoverflow.com/questions/27890439/trying-to-use-custom-element-you-tried-to-use-polymer-without-loading-it-first