使用插槽时如何使用javascript查找父元素宽度答案

【问题标题】：How to find the parent element width using javascript when we are using slot使用插槽时如何使用javascript查找父元素宽度
【发布时间】：2019-12-31 20:25:42
【问题描述】：

我有一个自定义元素，其中包含一个包含插槽的 div。

在那个插槽中，我有 JS 脚本，我想在其中获取插槽父 div 的宽度。

我知道单词非常令人困惑:)。

here is the sample code link

<!doctype html>
<body>
<script>
customElements.define('user-card', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <style>
        .name {
          font-size: 24px;
          width:200px;
          background-color: yellow
        }
      </style>
      <div class="name">Name:
        <slot name="username"></slot>
      </div>
      <div class="dob">Birthday:
        <slot name="birthday"></slot>
      </div>
    `;
    this.shadowRoot.styles = `

    `
  }
});
</script>

<user-card>
  <span slot="username">
    <script>
      function abc(event) {
        console.log('Expected: ', this.document.getElementsByTagName('user-card')[0].shadowRoot.querySelectorAll('div.name')[0].offsetWidth)
        console.log('Result: ',event.target.parentElement.offsetWidth);
      }

    </script>
    <div onclick="abc(event)">
      Ritesh Rajput
      </div>

  </span>
  <span slot="birthday">01.01.2001</span>
</user-card>
</body>

理想情况下两者都应该返回相同的值

console.log('Expected: ', this.document.getElementsByTagName('user-card')[0].shadowRoot.querySelectorAll('div.name')[0].offsetWidth)
console.log('Result: ',event.target.parentElement.offsetWidth);

【问题讨论】：

标签： javascript dom web-component shadow-dom custom-element

【解决方案1】：

在第二个日志中，元素event.target.parentElement 是<span slot="username">。 <span> 是 inline，宽度为 0。

如果您想读取它的宽度，您必须将 CSS 显示属性设置为 inline-block。

您可以在主页中定义它：

<head>
  <style>
    span[slot=username] {
      display: inline-block;
      width: 100%; 
    }
  </style>
</head>

或者通过 ::slotted() CSS 伪元素在 Shadow DOM 中：

<style>
  ::slotted(span[slot=username]) {
      display: inline-block;
      width: 100%;         
  }
</style>

customElements.define('user-card', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'})
        .innerHTML = `
      <style>
        div.name {
          font-size: 24px;
          width: 200px;
          background-color: yellow;
          display: inline-block;
        }
        ::slotted(span[slot="username"]) {
          display: inline-block; 
          width: 100%;
        }
      </style>
      <div class="name">Name :
        <slot name="username"></slot>
      </div>
      <div class="dob">Birthday:
        <slot name="birthday"></slot>
      </div>
    `
  }
})

function abc(event) {
  console.log('Expected: ', this.document.getElementsByTagName('user-card')[0].shadowRoot.querySelector('.name').offsetWidth)
  console.log('Result: ', event.target.parentElement.offsetWidth)
}

<user-card>
  <span slot="username">
    <div onclick="abc(event)">Ritesh Rajput</div>
  </span>
  <span slot="birthday">01.01.2001</span>
</user-card>

【讨论】：