聚合物纸张下拉菜单在浏览器中无法正确呈现

时间：2016-06-15 17:28:21

标签： html angular polymer

我遇到了一个简单的纸张下拉菜单的渲染html问题。列表项不会显示为带样式的＆＃34;菜单＆＃34;，而只是显示在页面上的项目列表。

单击渲染的纸张输入组件（渲染下拉列表的一部分）会为波纹设置动画，但不会为菜单和菜单项的显示/隐藏设置动画。单击列表中的项目会导致列表消失，但再次单击下拉列表不会重新显示列表。

在检查渲染的html并将其与相同的渲染演示html进行比较后，我发现纸质列表框和包含的纸张项目在铁下拉元素之外很好地呈现。这会导致所有非功能性。通过使用检查器并抓取纸质列表框html并将其移动到铁下拉列表中，可以按预期修复所有内容和下拉功能。

是什么原因导致列表框不合适？

以下是纸张下拉菜单的工作HTML应如下所示：

...
<iron-dropdown id="dropdown" class="style-scope paper-menu-button" aria-disabled="false" horizontal-align="right" vertical-align="top" style="outline: none; z-index: 103; margin-bottom: 8px; margin-top: 8px; position: fixed; left: 137.938px; top: 317px;">
  <div id="contentWrapper" class="style-scope iron-dropdown">
    <div class="dropdown-content style-scope paper-menu-button" style="transform-origin: 0px 0px 0px; box-sizing: border-box; max-width: 104.063px; max-height: 218px;">
      <paper-listbox role="listbox" tabindex="0" class="dropdown-content x-scope paper-listbox-0 x-scope paper-listbox-0" aria-expanded="true">
          <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">CRV-6</paper-item>
          <paper-item role="option" tabindex="-1" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">M3 Turbo</paper-item>
          <paper-item role="option" tabindex="-1" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">919 Turbo</paper-item>
          <paper-item role="option" tabindex="-1" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">300</paper-item>
      </paper-listbox>
    </div>
  </div>
</iron-dropdown>
</paper-menu-button>
</paper-dropdown-menu></div>

Working dropdown menu

但我发现以下内容不起作用：

...
   <iron-dropdown id="dropdown" class="style-scope paper-menu-button" aria-disabled="false" aria-hidden="true" horizontal-align="right" vertical-align="top" style="outline: none; display: none;">
    <div id="contentWrapper" class="style-scope iron-dropdown">
      <div class="dropdown-content style-scope paper-menu-button">
      </div>
    </div>
  </iron-dropdown>
  </paper-menu-button>

    <paper-listbox role="listbox" tabindex="0" class="dropdown-content x-scope paper-listbox-0">
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">CRV-6</paper-item>
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">M3 Turbo</paper-item>
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">919 Turbo</paper-item>
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">300</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
</div>

Not working dropdown. Shows as list of items

手动将paper-listbox元素和子元素推入div.dropdowncontent可以使控件完美地工作。同样有趣的是，使一些看似非描述性的空白变化（在检查器中）导致重新呈现该部分，并且整个纸张 - 下拉菜单元素和子项被删除，或者纸质列表框得到重新在正确的位置渲染，控件工作。

知道什么可能导致列表框元素不合适？

以下是呈现下拉列表的源page.component.html 

<div class="row">
  <div class="col col-xs-12">
    <paper-dropdown-menu label="Vehicle Model">
      <paper-listbox class="dropdown-content">
        <paper-item>CRV-6</paper-item>
        <paper-item>M3 Turbo</paper-item>
        <paper-item>919 Turbo</paper-item>
        <paper-item>300</paper-item>
      </paper-listbox>
    </paper-dropdown-menu>
  </div>
</div>

带有引用的index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Permit Management</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.js"></script>
    <script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.min.js"></script>
    <script src="node_modules/moment/moment.js"></script>
    <script src="node_modules/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
    <script src="lib/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />

    <link rel="import" href="lib/paper-button/paper-button.html" />
    <link rel="import" href="lib/paper-input/paper-input.html" />
    <link rel="import" href="lib/paper-item/paper-item.html" />
    <link rel="import" href="lib/paper-menu/paper-menu.html" />
    <link rel="import" href="lib/paper-menu-button/paper-menu-button.html" />
    <link rel="import" href="lib/paper-dropdown-menu/paper-dropdown-menu.html" />
    <link rel="import" href="lib/paper-listbox/paper-listbox.html" />
    <link rel="import" href="lib/paper-checkbox/paper-checkbox.html" />
    <link rel="import" href="lib/paper-toggle-button/paper-toggle-button.html" />
    <link rel="import" href="lib/paper-progress/paper-progress.html" />
    <link rel="import" href="lib/paper-spinner/paper-spinner-lite.html" />
    <link rel="import" href="lib/gold-phone-input/gold-phone-input.html" />

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/main')
        .then(null, console.error.bind(console));
    </script>
    <style is="custom-style">
      #permitOwner {
        --paper-input-container-input: {
          font-size: 30px;
          padding-left: 20px;
          cursor: pointer;
          };
      }
      #permitHolder {
        --paper-input-container-input: {
          padding-left: 20px;
          cursor: pointer;
      };
    }
    .plate-entry {
        --paper-input-container-input: {
            text-transform: uppercase;
        };
    }
</style>

<base href="/" />
</head>
<!-- 3. Display the application -->
<body>
    <permit-manager-app>Loading...</permit-manager-app>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="styles.css">
  </script>
</body>
</html>

bower.js包版本：

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "polymer": "^1.5.0",
    "webcomponentsjs": "^0.7.21",
    "paper-button": "^1.0.11",
    "paper-input": "^1.1.10",
    "paper-progress": "^1.0.9",
    "paper-dropdown-menu": "^1.2.1",
    "paper-menu": "^1.2.2",
    "paper-item": "^1.2.1",
    "paper-listbox": "^1.1.2",
    "paper-checkbox": "^1.2.0",
    "paper-toggle-button": "^1.1.2",
    "gold-phone-input": "^1.0.9",
    "tether": "^1.3.2",
    "tether-tooltip": "^1.2.0",
    "requirejs": "^2.2.0",
    "paper-spinner": "^1.1.1",
    "web-animations-js": "^2.2.1"
  },
  "resolutions": {
    "polymer": "^1.1.0"
  }

附加信息：

纸张下拉菜单从index.html呈现并正常运行。但不是来自组件和路由器插座。

1 个答案:

答案 0 :(得分：0)

这是由于Polymer如何使用Shadow DOM。尽管某些浏览器本身支持Shadow DOM，但默认情况下Polymer在“Shady DOM”模式下工作。它不使用Shadow DOM，而是将元素的本地DOM放在常规DOM树中，同时为样式应用范围。

不幸的是，这要求开发人员始终使用Polymer.dom访问器来操作Polymer元素的DOM内容。 Angular 2不知道这一点。在Angular 2应用程序中，组件HTML模板首先编译为JavaScript，然后使用常规浏览器DOM API放置在DOM中。

要解决此问题，您可以尝试使用Vaadin Angular2-Polymer包。它修补Angular 2 DomAdapter以使用Polymer访问器函数进行DOM操作。这使Polymer的内存中逻辑DOM树保持正确状态，从而解决了问题。我建议这样，该软件包还解决了一些其他兼容性问题，例如：双向数据绑定，样式和ngForm支持。

或者，您可以通过在该部分中的webcomponentsjs脚本之后添加一行<script>window.Polymer = { dom: 'shadow' };</script>来将Polymer切换到Shadow DOM模式。在缺点方面，在这种模式下，需要在浏览器中支持Shadow DOM，无论是本机还是完整的webcomponents.js polyfill，都会对性能产生影响。

相关问题
最新问题