fix(addon-bangumi): customCss not work

demo/yun/valaxy.config.ts

@@ -85,6 +85,7 @@ export default defineValaxyConfig<ThemeConfig>({
       api: 'https://yi_xiao_jiu-bangumi.web.val.run',
       bilibiliUid: '1579790',
       bgmEnabled: false,
+      customCss: '.bbc-bangumi-title a { color: red; }',
     }),
     addonComponents(),
 

packages/valaxy-addon-bangumi/README.md

@@ -2,7 +2,7 @@
 
 关联 issue [[功能建议] 追番列表](https://github.com/YunYouJun/valaxy/issues/296)
 
-依赖 [bilibili-bangumi-component](https://github.com/yixiaojiu/bilibili-bangumi-component)，需要部署后端服务，可参考 [bilibili-bangumi 使用](https://github.com/yixiaojiu/bilibili-bangumi-component?tab=readme-ov-file#%E4%BD%BF%E7%94%A8)进行搭建
+依赖 [bilibili-bangumi-component](https://github.com/yixiaojiu/bilibili-bangumi-component)，需要部署后端服务，可参考 [bilibili-bangumi 使用](https://github.com/yixiaojiu/bilibili-bangumi-component/blob/main/docs/backend.md)进行搭建，也可以先用这个 `https://yi_xiao_jiu-bangumi.web.val.run`，可能会挂。
 
 ## 如何集成
 

packages/valaxy-addon-bangumi/components/ValaxyBangumi.vue

@@ -3,27 +3,38 @@ import { onMounted, ref } from 'vue'
 import { isClient } from '@vueuse/core'
 import { useAddonBangumi } from '../client'
 
-(async () => {
-  if (!isClient)
-    return
-  const { defineCustomElements } = await import('bilibili-bangumi-component/loader')
-  defineCustomElements()
-})()
-
 const bangumiRef = ref<HTMLElement>()
+const customCssInjected = ref(false)
 
 const bangumiOptions = useAddonBangumi()
 
 const { api, bgmEnabled, bgmUid, bilibiliEnabled, bilibiliUid, customCss, customEnabled, customLabel, pageSize } = bangumiOptions.value
 
-onMounted(() => {
-  if (!customCss)
+function injectCustomCss() {
+  if (!customCss || customCssInjected.value)
     return
 
   const sheet = new CSSStyleSheet()
   sheet.replaceSync(customCss)
   bangumiRef.value?.shadowRoot?.adoptedStyleSheets.push(sheet)
-})
+
+  if (bangumiRef.value?.shadowRoot)
+    customCssInjected.value = true
+}
+
+;(async () => {
+  if (!isClient)
+    return
+  const { defineCustomElements } = await import('bilibili-bangumi-component/loader')
+  defineCustomElements()
+
+  // Web Component may not define when vue component mount
+  injectCustomCss()
+})()
+
+onMounted(() =>
+  injectCustomCss(),
+)
 </script>
 
 <template>

packages/valaxy-addon-bangumi/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-addon-bangumi",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Bangumi addon for Valaxy",
   "repository": {
     "type": "git",
@@ -18,6 +18,6 @@
     "valaxy": "latest"
   },
   "dependencies": {
-    "bilibili-bangumi-component": "^0.3.0"
+    "bilibili-bangumi-component": "^0.3.1"
   }
 }