仅附加阴影根的自定义组件上的“框-阴影”应用，就好像组件是0x0px一样。
仅附加阴影根的自定义组件上的“框-阴影”应用，就好像组件是0x0px一样。
提问于 2022-05-31 20:53:46
我有一个自定义组件，它只附加阴影根目录，里面没有子元素。在Chrome工具中，悬停在自定义组件上，用正确的像素号在屏幕上显示其实际大小。但是，当向该组件添加box-shadow属性时，会将阴影应用到组件的左上角，就好像该组件本身仅为0px乘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>
这是已知的bug吗?有解决办法吗？或者我的代码中有错误？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-05-31 21:58:46
您的自定义组件将具有内联显示，并且在其中添加一个块元素。您正面临着"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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72454013
复制相关文章
相似问题
腾讯云开发者
