Polymer 1.x：当不是 paper-dialog 的直接子级时，如何让 paper-dialog-scrollable 呈现和表现

Question

This jsBin demos correct implementation of paper-dialog-scrollable.

However, this jsBin demonstrates 当 paper-dialog-scrollable 不是 paper-dialog 的直接子节点时（即 paper-dialog-scrollable 在中间层 div 中，它无法正确呈现标签，它打破了它）。

当 paper-dialog-scrollable 不是 paper-dialog 的直接子项时，如何使它正确呈现并显示正确的滚动行为？请提供一个有效的 jsBin。

http://jsbin.com/fapivoqako/1/edit?html,输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-dialog/paper-dialog.html" rel="import">
  <link href="paper-dialog-scrollable/paper-dialog-scrollable.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>

<button on-tap="open">Open</button>

<paper-dialog id="dialog">
  <div>
    <paper-dialog-scrollable>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et felis sem. Fusce at sollicitudin turpis, quis malesuada risus. Praesent nibh purus, gravida at bibendum non, ultrices et ipsum. Sed eu nibh nisl. Praesent mollis faucibus lorem eu ultricies. Nunc viverra est leo, vitae bibendum massa bibendum ac. Pellentesque rhoncus dui eget metus pulvinar, ac pharetra metus luctus. Nam sodales velit a enim pharetra tincidunt. Cras justo mauris, malesuada eu hendrerit vel, scelerisque et purus. Curabitur elementum, eros quis bibendum fringilla, ante lacus consequat nunc, quis tincidunt ante felis a nunc. Pellentesque in dolor dapibus, gravida purus vitae, vulputate tellus. Phasellus non arcu vel arcu bibendum ultrices nec quis quam. Ut tellus tellus, pellentesque a auctor at, maximus at lectus. In hac habitasse platea dictumst.</p><p>Duis vel finibus est. Donec commodo, nibh id auctor ullamcorper, augue nunc scelerisque magna, sed volutpat velit elit malesuada augue. Sed tempus, mi eget tincidunt sodales, arcu quam maximus nunc, ut fringilla ex nibh at justo. Morbi libero felis, iaculis ac dui at, convallis sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam convallis elit orci, sed interdum dolor egestas in. Suspendisse luctus nibh ligula, non commodo erat volutpat ut. Nam mattis risus nec dolor pretium ornare. Phasellus ornare rhoncus elit a facilisis. Nullam non facilisis libero. Maecenas cursus tristique commodo.</p><p>Praesent consequat, diam non faucibus dictum, nisi ex faucibus risus, sit amet maximus dolor metus eu metus. Nullam malesuada sem id libero semper, id eleifend est tincidunt. Proin euismod urna augue, ut rutrum erat tristique non. Donec nec pellentesque sem. Fusce sit amet magna quis enim dapibus mattis. Ut tempus purus non sem tincidunt bibendum. Quisque cursus pretium ipsum, id hendrerit nisl mattis id. Vestibulum ultrices malesuada nisl, a cursus lorem sollicitudin id. Proin finibus rhoncus leo, at finibus lacus consectetur eu. Nulla aliquam quis risus non ultricies. Sed suscipit odio sed turpis scelerisque, non ultricies risus posuere. Duis et convallis felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin a volutpat lorem. Nulla eleifend erat viverra nisi venenatis porttitor.</p><p>Proin egestas, ex et hendrerit pellentesque, orci sem posuere est, ornare porta augue mauris vitae elit. Nunc lobortis sapien in lobortis cursus. Morbi lacinia vel ligula a varius. Morbi mauris metus, pretium sit amet nibh in, vestibulum dapibus felis. Aliquam laoreet dolor nisi, vel ornare orci ultricies vitae. Donec facilisis vehicula elementum. Donec sed ligula leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p><p>Suspendisse eget orci in augue vulputate eleifend non eu sem. Etiam ipsum velit, gravida a egestas a, faucibus sed mauris. Morbi sit amet euismod odio, ac scelerisque diam. Donec neque risus, malesuada vel efficitur quis, tristique non lacus. Suspendisse potenti. Curabitur placerat felis sed ipsum sodales, sit amet dignissim arcu molestie. Sed tincidunt iaculis sagittis. Phasellus aliquet, lorem sed laoreet fermentum, massa mi facilisis felis, ac mattis magna turpis eu odio. Integer gravida sem ac tellus suscipit scelerisque. Aliquam et turpis tristique, elementum dolor luctus, auctor eros.
    </paper-dialog-scrollable>    
  </div>
</paper-dialog>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
      open: function() {
        this.$.dialog.open();
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Answer 1

docs for paper-dialog-scrollable状态：

If paper-dialog-scrollable is not a direct child of the element implementing Polymer.PaperDialogBehavior, remember to set the dialogElement

要使您的示例正常工作：

// template
<paper-dialog id="dialog">
  <div>
    <paper-dialog-scrollable id="scrollable">
      <p>Lorem ipsum dolor sit amet...</p>
    </paper-dialog-scrollable>    
  </div>
</paper-dialog>

// script
Polymer({
  ...
  ready: function() {
    this.$.scrollable.dialogElement = this.$.dialog;
  }
});

jsbin

Polymer 1.x：当不是 paper-dialog 的直接子级时，如何让 paper-dialog-scrollable 呈现和表现

Polymer 1.x: How to get paper-dialog-scrollable to render and behave when not direct child of paper-dialog

polymer

polymer-1.0

paper-elements