具有绝对位置的自定义元素

debugcn 发表于 Dev

猎豹

我试图fin-hypergrid在 web 组件中包含/放置 a ，但是因为它的滚动条是自定义div的position: absolute，所以它们被定位为绝对window而不是组件本身。

这是我的 jsfiddle：https ://jsfiddle.net/50kyyfam/

我几乎可以肯定我需要在:host样式中添加一个 css 属性来告诉网格绝对定位到data-grid组件的边界，但我不知道它应该是什么？

编辑：作为旁注，如果有任何一个fin-hypergrid正在寻找，则核心的缩小版本在初始化上述 jsfiddle 时会引发异常。(铬 63)

未捕获类型错误

到定位绝对定位元件相对于其包含元素，position: relative应含有元件，例如上宣称：

data-grid {
    position: relative;
}

class DataGrid extends HTMLElement {

    constructor() {
      super();
      this.createShadowRoot().innerHTML = `
      	<style>
        	:host {
          	display: block;
          }
          
          div {
          	height: 100%;
          	width: 100%;
          }
        </style>
        <div></div>
      `;
    }

    connectedCallback() {
			const grid = new fin.Hypergrid(this.shadowRoot.querySelector('div'));
      const data = [
        { name: 'Company 1', price: 300 },
        { name: 'Company 2', price: 200 },
        { name: 'Company 3', price: 150 },
        { name: 'Company 4', price: 500 },
        { name: 'Company 5', price: 999 }
      ];
      grid.setData(data);
    }

  }

  customElements.define('data-grid', DataGrid);

data-grid {
    position: relative;
}

<script src="https://fin-hypergrid.github.io/core/2.0.2/build/fin-hypergrid.js"></script>

<data-grid style="width:100px; height: 150px;"></data-grid>

更新了 JSFiddle

为了清楚起见并为了任何其他可能的读者的潜在利益，扩展：

将元素声明为绝对定位元素（absolute或fixed）时，您是从自然文档流中删除该元素；这只是意味着该元素不再以relative或static元素的方式与兄弟元素交互（想象一下该元素“位于”DOM 的其余部分之上）。
默认情况下，绝对定位元素的位置是“相对于”窗口的；这意味着如果您使用left或right属性值偏移其位置，它将从 window移动等于属性值的距离。如果声明相对于包含元素的相对定位，则可以相对于任何包含元素定位position属性值为absolute(not fixed)的元素。