我正在尝试向 Web 组件添加自定义滚动条。
我对 Web 组件不是很熟悉，但我知道将伪元素应用到部件上很困难。根据我的阅读，在 Shadow dom 中应用样式的一种可能有效的方法是将样式内联包含在组件的 javascript 中？然而我的js技能还不够好，不知道把它放在js的哪里！谁能建议，下面的样式应该放在哪里才能将样式应用于 x-modal 组件中的模态类？
预先感谢您对此提供的任何帮助。
// js/common/overlay/modal.js
import { animate as animate5, timeline as timeline2 } from "vendor";
var Modal = class extends DialogElement {
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-modal", "true");
}
get shadowDomTemplate() {
return this.getAttribute("template") || "modal-default-template";
}
get shouldLock() {
return true;
}
get shouldAppendToBody() {
return true;
}
createEnterAnimationControls() {
if (matchesMediaQuery("sm")) {
return animate5(this, { opacity: [0, 1] }, { duration: 0.2 });
} else {
return timeline2([
[this.getShadowPartByName("overlay"), { opacity: [0, 1] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1] }],
[this.getShadowPartByName("content"), { transform: ["translateY(100%)", "translateY(0)"] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1], at: "<" }]
]);
}
}
createLeaveAnimationControls() {
if (matchesMediaQuery("sm")) {
return animate5(this, { opacity: [1, 0] }, { duration: 0.2 });
} else {
return timeline2([
[this.getShadowPartByName("overlay"), { opacity: [1, 0] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1] }],
[this.getShadowPartByName("content"), { transform: ["translateY(0)", "translateY(100%)"] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1], at: "<" }]
]);
}
}
};
if (!window.customElements.get("x-modal")) {
window.customElements.define("x-modal", Modal);
}.modal::-webkit-scrollbar {
background-color: #fff;
width: 16px;
overflow: auto;
} /* SUB background of the scrollbar except button or resizer */
.modal::-webkit-scrollbar-track {
background-color: #fff;
} /* SUB scrollbar itself */
.modal::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
border: 4px solid #fff;
} /* SUB set button(top and bottom of the scrollbar) */
.modal::-webkit-scrollbar-button {
display: none;
}我在代码中的模态类中没有看到构造函数。
请修改您的代码。
var Modal = class extends DialogElement {
constructor() {
super()
// todo: here add shadow dom
}
...
然后你需要使用Shadow DOM。
它对页面上的其余代码隐藏了标记结构、样式和行为。
参考代码。
<style>
.content {
background: #fff !important;
}
</style>
<body>
<x-modal/>
</body>
<script>
class Modal extends HTMLElement {
constructor() {
super()
let style = document.createElement("style");
style.textContent = `
.modal::-webkit-scrollbar {
background-color: #fff;
width: 16px;
overflow: auto;
}
/* SUB background of the scrollbar except button or resizer */
.modal::-webkit-scrollbar-track {
background-color: #fff;
}
/* SUB scrollbar itself */
.modal::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
border: 4px solid #fff;
}
/* SUB set button(top and bottom of the scrollbar) */
.modal::-webkit-scrollbar-button {
display: none;
}
.modal {
overflow: scroll;
width: 400px;
height: 400px;
border: 1px solid;
}
.content {
height: 700px;
background: red;
}`
const div = document.createElement('div');
const content = document.createElement('div');
div.classList.add("modal")
content.classList.add("content")
content.textContent = "this is a modal"
div.appendChild(content)
this.attachShadow({mode: "open"});
this.shadowRoot.appendChild(style);
this.shadowRoot.appendChild(div);
}
}
if (!window.customElements.get("x-modal")) {
window.customElements.define("x-modal", Modal);
}
</script>