paper-dialog doesn't work in polymer 2.0 element in any browser.

crreddys commented 7 years ago

Description

Nothing shows up which i click dialog.open(). I dont see any errors in console as well. All the reference files are loaded properly. I dont know if i am doing anything wrong.

Here is my code

My element

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/demo-pages.html">
<link rel="import" href="../neon-animation/neon-animations.html">

<dom-module id="paper-modal-element">
  <template>
    <style>
       :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]</h2>
    <a href="#" on-click="openDialog">Test 123</a>
    <button on-click="openDialog">button abc</button>
    <paper-dialog id="dialog" opened="true">
      <h2>Dialog Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </paper-dialog>
  </template>

  <script>
    class MyElement extends Polymer.Element {
      static get is() { return 'paper-modal-element'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'paper-modal-element'
          }
        };
      }

      ready() {
        super.ready();
      }

      openDialog() {
        this.$.dialog.open();
      }
    }

    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

My demo page.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

  <title>paper-modal-element demo</title>

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
  <link rel="import" href="../paper-modal-element.html">
  <link rel="import" href="../../paper-styles/color.html">
  <link rel="import" href="../../paper-styles/demo-pages.html">
  <link rel="import" href="../../neon-animation/neon-animations.html">

  <style is="custom-style" include="demo-pages-shared-styles">

  </style>
</head>

<body>
  <div class="vertical-section-container centered">
    <h3>Basic paper-modal-element demo</h3>
    <demo-snippet>
      <template>
        <paper-modal-element></paper-modal-element>
      </template>
    </demo-snippet>
  </div>
</body>

</html>

Bower file for dependencies.

{
  "name": "paper-modal-element",
  "description": "modal paper ele",
  "main": "paper-modal-element.html",
  "dependencies": {
    "polymer": "Polymer/polymer#^2.0.0-rc.2",
    "paper-dialog": "PolymerElements/paper-dialog#^1.1.0"
  },
  "devDependencies": {
    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview",
    "web-component-tester": "v6.0.0-prerelease.5",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.5"
  },
  "resolutions": {
    "polymer": "^2.0.0-rc.2",
    "iron-resizable-behavior": "2.0-preview",
    "iron-a11y-keys-behavior": "2.0-preview",
    "iron-meta": "2.0-preview",
    "iron-flex-layout": "2.0-preview",
    "iron-selector": "2.0-preview",
    "paper-styles": "2.0-preview",
    "webcomponentsjs": "^1.0.0-rc.5"
  }
}

Browsers Affected

It doesn't work in any browser.

valdrinkoshi commented 7 years ago

Thats because you're depending on paper-dialog#^1.1.0 instead of paper-dialog#2.0-preview If you update your bower to depend on 2.0-preview you won't need all those resolutions

crreddys commented 7 years ago

Thanks @valdrinkoshi. Fixing the bower with right version fixed the issue.

PolymerElements / paper-dialog