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.commentForm = null;
this.commentList = null; this.commentList = null;
this.formContainer = null; this.formContainer = null;
this.customStyleElement = null;
this.store = null; this.store = null;
this.unsubscribe = null; this.unsubscribe = null;
this.likeState = { this.likeState = {
@@ -126,6 +127,7 @@ export class CWDComments {
if (this.config.theme) { if (this.config.theme) {
this.mountPoint.setAttribute('data-theme', this.config.theme); this.mountPoint.setAttribute('data-theme', this.config.theme);
} }
this._applyCustomCss();
} }
(async () => { (async () => {
@@ -549,6 +551,37 @@ export class CWDComments {
this.store.loadComments(); 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) { _initLikeButton(header) {