聚合物纸下拉菜单在浏览器中无法正确显示 [英] Polymer paper-dropdown-menu not rendered correctly in browser
问题描述
我在使用简单的纸张下拉菜单呈现HTML时遇到问题。列表项目不会显示为样式化的菜单，而只是出现在页面上的项目列表。
单击呈现的纸张输入组件（部分呈现的下拉菜单）会为波纹设置动画，但不会为菜单和菜单项的显示/隐藏设置动画。单击列表中的项目会导致列表消失，但再次单击下拉列表不会重新显示列表。
在检查呈现的html并将其与相同的呈现的演示html进行比较后，我发现纸张列表框和包含的纸张项目在铁板之外呈现良好，下拉元素应该在哪里。这会导致所有非功能性。通过使用检查器并抓取paper-listbox html并将其移动到iron-dropdown中，可以修复所有内容和预期的下拉功能。
是什么导致列表框被渲染出来的地方？
以下是用于下拉菜单的HTML应该是这样的：
...
< div class =dropdown-content style-scope paper-menu-buttonstyle =transform-origin：0px 0px 0px; box-sizing：border-box; max-width：104.063px; max- height：218px;>
< paper-listbox role =listboxtabindex =0class =dropdown-content x-scope paper-listbox-0 x-scope paper-listbox-0aria-expanded =true> ;
< paper-item-role =optiontabindex =0aria-disabled =falseclass =x-scope paper-item-0 x-scope paper-item-0> CRV- 6≤/纸张项>
> M3
< paper-item role =optiontabindex = - 1aria-disabled =falseclass =涡轮< /纸张项>
> 919纸质项目角色=选项tabindex = - 1aria-disabled =falseclass =涡轮< /纸张项>
< paper-item role =optiontabindex = - 1aria-disabled =falseclass =x-scope paper-item-0 x-scope paper-item-0> 300< ; /纸张项>
< / paper-listbox>
< / div>
< / div>
< / iron-dropdown>
< / paper-menu-button>
< / paper-dropdown-menu>< / div> b
$ b
但是，我看到以下内容不起作用：
...
< div class =dropdown-content style-scope paper-menu-button>
< / div>
< / div>
< / iron-dropdown>
< / paper-menu-button>
< paper-listbox role =listboxtabindex =0class =dropdown-content x-scope paper-listbox-0>
< paper-item role =optiontabindex =0aria-disabled =falseclass =x-scope paper-item-0> CRV-6< / paper-item>
< paper-item role =optiontabindex =0aria-disabled =falseclass =x-scope paper-item-0> M3 Turbo< / paper-item>
< paper-item role =optiontabindex =0aria-disabled =falseclass =x-scope paper-item-0> 919 Turbo< / paper-item>
< paper-item role =optiontabindex =0aria-disabled =falseclass =x-scope paper-item-0> 300< / paper-item>
< / paper-listbox>
< / paper-dropdown-menu>
< / div>
手动将paper-listbox元素和子元素推入div.dropdowncontent，使控件可以完美工作。另外有趣的是，在检查器中进行一些看起来没有描述的空白变化会导致对该部分进行重新渲染，并且删除整个下拉菜单元素和子元素，或者将纸张列表框重新渲染，呈现在正确的地方和控制工程。
任何想法都可能导致listbox元素不合适？
以下是源代码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>许可管理< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
<！ - - 1.加载库 - >
<！ - IE所需的polyfills，按此确切顺序 - >
< 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 =stylesheethref =node_modules / bootstrap / dist / css / bootstrap.min.css/>
< link rel =stylesheethref =node_modules / font-awesome / css / font-awesome.css/>
< link rel =stylesheethref =node_modules / awesome-bootstrap-checkbox / awesome-bootstrap-checkbox.css/>
< link rel =importhref =lib / paper-button / paper-button.html/>
< link rel =importhref =lib / paper-input / paper-input.html/>
< link rel =importhref =lib / paper-item / paper-item.html/>
< link rel =importhref =lib / paper-menu / paper-menu.html/>
< link rel =importhref =lib / paper-menu-button / paper-menu-button.html/>
< link rel =importhref =lib / paper-dropdown-menu / paper-dropdown-menu.html/>
< link rel =importhref =lib / paper-listbox / paper-listbox.html/>
< link rel =importhref =lib / paper-checkbox / paper-checkbox.html/>
< link rel =importhref =lib / paper-toggle-button / paper-toggle-button.html/>
< link rel =importhref =lib / paper-progress / paper-progress.html/>
< link rel =importhref =lib / gold-phone-input / gold-phone-input.html/>
<！ - - 2.配置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;
光标：指针;
};
}
#permitHolder {
--paper-input-container-input：{
padding-left：20px;
光标：指针;
};
}
.plate-entry {
--paper-input-container-input：{
text-transform：uppercase;
};
}
< / style>
< base href =//>
< / head>
<！ - - 3.显示应用程序 - >
< body>
< permit-manager-app>载入中...< / 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 =stylesheethref =styles.css>
< / script>
< / body>
< / html>
bower.js包版本：
<$ p $ b $ {
name：ASP.NET，
private：true，
dependencies：{
polymer ：^ 1.5.0，
webcomponentsjs：^ 0.7.21，
paper-button：^ 1.0.11，
纸张输入： ^ 1.1.10，
paper-progress：^ 1.0.9，
paper-dropdown-menu：^ 1.2.1，
菜单：^ 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
}，
决议：{
polymer：^ 1.1.0
}
其他信息：
纸张下拉菜单在index.html中呈现并正常工作。然而，这并不是来自组件和路由器插座内的。
这是由于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，为DOM操作使用Polymer accessor函数。这将Polymer的内存逻辑DOM树保持在正确的状态，从而解决了这个问题。我会推荐这种方式，该包还解决了一些其他兼容性问题，如：双向数据绑定，样式和 ngForm 支持。
或者，您可以通过添加一行< script> window.Polymer = {dom：'shadow'};< / script> 紧跟在该部分的webcomponentsjs脚本之后。不利的一面是，在这种模式下，它需要在浏览器中支持Shadow DOM，无论是本地还是完整的webcomponents.js polyfill，都会对性能产生影响。
I am having an issue with the rendered html for a simple paper-dropdown-menu. The list items do not appear as a styled "menu", but rather just a list of items appearing on the page.
Clicking the rendered paper-input component (part of the rendered dropdown) does animate the ripple, but does not animate the show/hide of the menu and menu items. Clicking an item in the list causes the list to disappear, but clicking the dropdown again does not make the list re-appear.
After examining the rendered html and comparing it with the same rendered demo html, I found that the paper-listbox and contained paper-items are rendered well outside of the iron-dropdown element where they should be. This causes all the non-functionality. By using the inspector and grabbing the paper-listbox html and moving it inside of the iron-dropdown fixes everything and the dropdown functions as expected.
What is causing the listbox to be rendered out of place?
Here is what the HTML that WORKS for a paper-dropdown-menu should look like:
...
<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>
But instead I see the following that DOES NOT WORK:
...
<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
Manually pushing the paper-listbox element and children into the div.dropdowncontent makes the control work perfectly. Also interesting, is making some seemingly non-descript white-space changes (in the inspector) causes a re-render of the section and either the whole paper-dropdown-menu element and children are removed, or the paper-listbox gets re-rendered in the correct place and the control works.
Any idea what could be driving the listbox element out of place?
Here is the source page.component.html that renders the dropdown
<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>
And the index.html with the references:
<!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 package versions:
{
"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"
}
ADDITIONAL INFO:
The paper-dropdown-menu renders and functions fine from the index.html. However does not from within a component and router-outlet.
This is due to how Polymer works with Shadow DOM. Even though some browsers support Shadow DOM natively, by default Polymer works in the "Shady DOM" mode. It doesn’t use Shadow DOM, but places the elements’s local DOM in a regular DOM tree, while applying scoping for the styles.
Unfortunately, this requires developers to always use Polymer.dom accessors to manipulate the DOM contents of Polymer elements. Angular 2 doesn’t know about that. In Angular 2 applications, component HTML templates are first compiled to JavaScript and then placed in DOM using regular browser DOM APIs.
To resolve this, you can try using Vaadin Angular2-Polymer package. It patches Angular 2 DomAdapter to use Polymer accessor functions for DOM manipulations. This keeps Polymer’s in-memory logical DOM tree in the right state and thus fixes the issue. I would recommend this way, the package also solves some other compatibility issues, such as: two-way data binding, styling and ngForm support.
Alternatively, you can switch Polymer to Shadow DOM mode by adding a line <script>window.Polymer = { dom: 'shadow' };</script> just after the webcomponentsjs script in the section. On the downside, in this mode it is required to have a support for Shadow DOM in browsers, either natively or with a full webcomponents.js polyfill, which has a performance impact.
这篇关于聚合物纸下拉菜单在浏览器中无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
