feat(评论组件): 添加自定义CSS样式支持

新增_customStyleElement属性和_applyCustomCss方法,用于根据配置动态加载自定义CSS样式
This commit is contained in:
anghunk
2026-01-22 17:49:28 +08:00
parent 103e0ceb25
commit fc99d334db

View File

@@ -43,6 +43,7 @@ export class CWDComments {
this.commentForm = null;
this.commentList = null;
this.formContainer = null;
this.customStyleElement = null;
this.store = null;
this.unsubscribe = null;
this.likeState = {
@@ -126,6 +127,7 @@ export class CWDComments {
if (this.config.theme) {
this.mountPoint.setAttribute('data-theme', this.config.theme);
}
this._applyCustomCss();
}
(async () => {
@@ -549,6 +551,37 @@ export class CWDComments {
this.store.loadComments();
}
this._applyCustomCss();
}
_applyCustomCss() {
if (!this.shadowRoot) {
return;
}
const rawUrl =
this.config && typeof this.config.customCssUrl === 'string'
? this.config.customCssUrl
: '';
const url = rawUrl.trim();
if (!url) {
if (this.customStyleElement && this.customStyleElement.parentNode) {
this.customStyleElement.parentNode.removeChild(this.customStyleElement);
}
this.customStyleElement = null;
return;
}
if (!this.customStyleElement) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
this.shadowRoot.appendChild(link);
this.customStyleElement = link;
return;
}
this.customStyleElement.href = url;
if (this.customStyleElement.parentNode !== this.shadowRoot) {
this.shadowRoot.appendChild(this.customStyleElement);
}
}
_initLikeButton(header) {