'box-shadow' 在仅附加影子根的自定义组件上应用，就好像组件是 0x0px

Question

我有一个自定义组件，它只附加了影子根，里面没有子元素。在 Chrome 开发工具中，将鼠标悬停在自定义组件上会显示其在屏幕上的实际大小以及正确的像素数。但是，当向此组件添加 box-shadow 属性时，阴影会应用到组件的左上角，就好像组件本身只有 0px x 0px 一样。

customElements.define('my-comp', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: 'open'
    })
    const div = document.createElement('div')
    div.setAttribute('style', 'height: 100px; width: 100px; background: lime')
    this.shadowRoot.append(div)
  }
})

<my-comp style="box-shadow: 0px 0px 10px 10px brown"></my-comp>

这是一个已知错误吗？是否有解决方法？或者我的代码某处有错误？

Answer 1

您的自定义组件将有一个内联显示，并且您要在其中添加一个块元素。您正面临 "block element inside inline element"

的行为

让你的元素inline-block避免处理这种情况

customElements.define('my-comp', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: 'open'
    })
    const div = document.createElement('div')
    div.setAttribute('style', 'height: 100px; width: 100px; background: lime')
    this.shadowRoot.append(div)
  }
})

<my-comp style="box-shadow: 0px 0px 10px 10px brown;display:inline-block"></my-comp>

'box-shadow' 在仅附加影子根的自定义组件上应用，就好像组件是 0x0px

'box-shadow' on a custom component with only a shadow root attached applies as if component is 0x0px

html

css

web-component