下面的代码在这个 jsbin中正常工作,但在这个 codepen、这个 plunker或这个 jsfiddle中都不能工作。
为什么不?我怎样才能让它在它没有的三个地方工作?
http://jsbin.com/yudavucola/1/edit?html,控制台,输出<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/scale-up-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<dom-module id="my-el">
<template>
<button on-click="open">Open Dialog</button>
<paper-dialog
id="dialog"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation"
modal
>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
open() {
console.log('opening...');
this.$.dialog.open();
console.log('opened!');
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>