gpt4 book ai didi

javascript - 修改影子根中自定义元素的样式

转载 作者:行者123 更新时间:2023-11-30 09:21:05 26 4
gpt4 key购买 nike

我正在尝试使用影子 DOM 修改两个自定义 HTML 元素“output-screen”和“custom-calculator”的样式。

当我尝试通过如下所示附加影子 DOM 来实现时,未应用样式。知道我做错了什么吗?

JS Fiddle

<custom-calculator id="calculator">
<output-screen></output-screen>
</custom-calculator>

<script>
var o = Object.create(HTMLElement.prototype);
var oElement = document.registerElement('output-screen', {
prototype: o
});

var c = Object.create(HTMLElement.prototype);
var cElement = document.registerElement('custom-calculator', {
prototype: c
});

var calc = document.querySelector('#calculator')
calc.attachShadow({ mode: 'open' });
calc.shadowRoot;
calc.shadowRoot.innerHTML = `
<style>
output-screen{
display:inline-block;
background-color:orange;
width:50%;
height:100vh;
}
custom-calculator {
display:inline-block;
background-color:grey;
width:100%;
height:100vh;
vertical-align:top;
}
</style>
`;
</script>

最佳答案

为了设置托管 Shadow DOM 的元素的样式,这里 <custom-calculator> , 你必须使用 de :host 伪类(而不是 Shadow DOM 中未知的 custom-calculator)。

:host {
display:inline-block;
background-color:grey;
width:100%;
height:100vh;
vertical-align:top;
}

因为 Shadow DOM 将替换/恢复普通的 DOM 树(这里是 <output-screen> ),所以你必须使用 <slot> 在 Shadow DOM 中插入/显示它。

calc.shadowRoot.innerHTML = `
<style>
...
</style>
<slot></slot>`

然后,为了对 <slot> 中显示的内容进行样式化元素,你必须使用 ::slotted() 伪元素:

::slotted( output-screen ){
display:inline-block;
background-color:orange;
width:50%;
height:100vh;
}

实例:

var calc = document.querySelector('#calculator')
calc.attachShadow({mode: 'open'});
calc.shadowRoot.innerHTML = `
<style>
:host {
display:inline-block;
background-color:grey;
width:100%;
height:100vh;
vertical-align:top;
}

::slotted( output-screen ){
display:inline-block;
background-color:orange;
width:50%;
height:100vh;
}
</style>
<slot></slot>`;
<custom-calculator id="calculator">
<output-screen></output-screen>
</custom-calculator>

关于javascript - 修改影子根中自定义元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51618975/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com