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

Question

我正在尝试在 Web 组件中 contain/put 一个 fin-hypergrid，但是因为它的滚动条是自定义的 div，上面带有 position: absolute，所以它们是绝对定位的window 而不是组件本身。

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

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

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

Answer 1

要将绝对定位元素相对定位到其包含元素，应在该包含元素上声明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>

Updated JSFiddle

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

将元素声明为绝对定位元素时（absolute 或 fixed）您正在 从自然文档流；这仅仅意味着该元素不再是以 relative 或 static 的方式与兄弟元素交互元素做（想象元素 "siting above" DOM 的其余部分）。
默认情况下，绝对定位元素的位置是 "relative"到window；这意味着如果你偏移它的位置使用 left 或 right 属性值它将移动等于来自 window 的属性值 。您可以定位一个元素 position 属性值为 absolute（不是 fixed）到任何包含元素 如果你声明相对定位到包含元素.

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

Custom element with position absolute

html

css

css-position

custom-element

fin-hypergrid