我一直在尝试通过扩展来制作自定义 HTML 元素HTMLElement班级。我尝试通过链接与其他两个文件位于同一目录中的 CSS 文件来添加一些样式 -index.html and custom.css.
主文件夹
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="nofollow" type="text/css" href=''>
</head>
<body>
<script src="./custom.js"></script>
<smooth-button text="Smooth button" no-1 = 1 no-2 = 2></smooth-button>
</body>
</html>
custom.css:
smooth-button{
display: block;
color: blue;
background-color: orange;
}
custom.js:
class SmoothButton extends HTMLElement{
constructor(){
super();
this.shadow = this.attachShadow({mode: "open"})
}
connectedCallback(){
this.render();
}
render(){
this.SumOfNo1AndNo2 = null;
if(this.getAttribute("no-1")!=null && this.getAttribute("no-2")!=null){
this.SumOfNo1AndNo2 = parseInt(this.getAttribute("no-1")) +
parseInt(this.getAttribute("no-2"));
}
else{
console.log("Invalid attribute.")
}
this.shadow.innerHTML = `<button>` + this.getAttribute("text") + " " + this.SumOfNo1AndNo2
+ "</button>"
}
}
customElements.define("smooth-button", SmoothButton);
这样，我就得到了一个带有文本的按钮，但样式作为一个整体应用于元素，而不是其组成的元素。如何将样式分别应用到它的每个元素（只是一个<button>现在）使用外部 CSS 文件？我正在使用外部 CSS，因为当我阅读它时它会更好here https://stackoverflow.com/a/68487642/16136190.
除了 Brad 和 Emiel 的回答之外，
- (Brad) Bluntly add a
<style> element inside shadowDOM
- 请阅读有关采用样式表 https://caniuse.com/?search=adopted（仅限铬）
- (Emilel) 使用级联 CSS 属性
- 还有更多设置 ShadowDOM 样式的选项：
学习关于可继承的风格
- https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/ https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/
use 阴影部分
<style>
::part(smoothButton){
display: block;
color: blue;
background-color: orange;
}
</style>
<smooth-button></smooth-button>
<smooth-button></smooth-button>
<script>
customElements.define("smooth-button", class extends HTMLElement {
constructor(){
super()
.attachShadow({mode:"open"})
.innerHTML = `<button part="smoothButton">LABEL</button>`;
}
});
</script>
- https://developer.mozilla.org/en-US/docs/Web/CSS/::part https://developer.mozilla.org/en-US/docs/Web/CSS/::part
- https://meowni.ca/posts/part-theme-explainer/ https://meowni.ca/posts/part-theme-explainer/
- https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/ https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/
- https://dev.to/webpadawan/css-shadow-parts-are-coming-mi5 https://dev.to/webpadawan/css-shadow-parts-are-coming-mi5
- https://caniuse.com/mdn-html_global_attributes_exportparts https://caniuse.com/mdn-html_global_attributes_exportparts
But...
你应该问自己的第一个问题：
我真的需要shadowDOM吗？
如果你不想要它的封装行为，那么就这样做not使用shadowDOM
<style>
.smoothButton{
display: block;
color: blue;
background-color: orange;
}
</style>
<smooth-button></smooth-button>
<smooth-button></smooth-button>
<script>
customElements.define("smooth-button", class extends HTMLElement {
connectedCallback(){
this.innerHTML = `<button class="smoothButton">LABEL</button>`;
}
});
</script>
影子 DOM<slot>
另一种选择是使用shadowDOM<slot>元素，因为它们是由其容器元素设计的
<style>
.smoothButton{
display: block;
color: blue;
background-color: orange;
}
</style>
<smooth-button><button class="smoothButton">LABEL</button></smooth-button>
<smooth-button><button class="smoothButton">LABEL</button></smooth-button>
<script>
customElements.define("smooth-button", class extends HTMLElement {
constructor(){
super()
.attachShadow({mode:"open"})
.innerHTML = `<slot></slot>`;
}
});
</script>
当你走下<slot>兔子洞，请务必阅读（很长）帖子：
::shadowDOM 插槽中嵌套子级的插槽 CSS 选择器 https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
