我有一个与position: fixed的div，假设它应该附加到视口的底部而不是滚动，至少根据MDN。
相反，我得到的是一个卡在其初始位置的div（在渲染页面时视口的底部），但随后使用shadow-dom滚动器向上和向下滚动。
编辑：
这是一个带有core-scaffold内部元素的codepen。请注意，此笔中的红色div具有位置：固定，如下面的代码所述。
http://codepen.io/ericeslinger/pen/bdedgp
这是一个带有core-scaffold外部元素的codepen。这是我想要的行为，但是div在结构上位于核心支架内（出于角度范围的原因）。
http://codepen.io/ericeslinger/pen/jPrPyy
FWIW，我使用聚合物0.5。这是我正在运行的草图：
<head>
<style type="text/css">
.testClass {
position: fixed;
z-index: 1000;
bottom: 0;
left: 0px;
right: 0px;
height: 150px;
background-color: red;
}
</style>
</head>
<body unresolved>
<core-scaffold>
<div main vertical layout>
<span>woo</span>
<div class="testClass">This is some stuff at the bottom</div>
<div style="min-height: 2000px" flex></div>
</div>
</core-scaffold>
如果我将testClass div移到core-scaffold之外，它会完成预期的操作并粘在窗口的底部。如果我把它放在核心支架内，它就不会。
原始问题中的codepen链接无效：
从'https://www.polymer-project.org/0.5/components/core-scaffold/core-scaffold.html'访问'https://s.codepen.io'的导入资源已被CORS政策阻止：请求的资源上没有'Access-Control-Allow-Origin'标题。
我试图更好地了解position:fixed和Shadow DOM。我希望position:fixed将在Shadow DOM边界内，而不是视口。这是我想出的一个演示：
(function() {
const template = document.createElement('template');
template.innerHTML = `
<style>
:host {
display: block;
background: red;
}
</style>
<div>
<slot name="top"></slot>
<hr>
<slot name="bottom"></slot>
</div>
`;
class MyInfoBox extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define('my-info-box', MyInfoBox);
})();<br>
<br>
<br>
<br>
<br>
<br>
<my-info-box>
<span slot="top">TOP</span>
<span slot="bottom">
<div style="position: fixed; top: 0; left: 0">BOTTOM</div>
</span>
</my-info-box> 希望有所帮助（我未来的自我）。对不起，如果我不能更具体的聚合物和核心支架。我真的不明白为什么Web组件是如此利基，而React实际上是一个新的Web标准。