我有一个自定义元素，其中有一个包含插槽的 div。
在那个插槽中，我有 JS 脚本，我想在其中获取插槽的父 div 的宽度。
我知道文字非常令人困惑:)。
<!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);
最佳答案
在第二个日志中，元素 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() 在 Shadow DOM 中CSS伪元素:
<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>关于javascript - 当我们使用槽时如何使用javascript找到父元素宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57678340/