feat: support link css from shadow dom

[yoyo837]

All :root css variables are also added under :host to support using link tags to get css vars from Shadow DOM.

If we can take all css variables extracted to a separate single css file and publish, it seems to be an another solution that can be considered.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (6bab89f) 89.85% compared to head (89b4dd1) 89.84%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12526      +/-   ##
==========================================
- Coverage   89.85%   89.84%   -0.02%     
==========================================
  Files         257      257              
  Lines        6802     6802              
  Branches     1647     1647              
==========================================
- Hits         6112     6111       -1     
  Misses        366      366              
- Partials      324      325       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[chenjiahan]

Can you provide some example code of using link tags to get css vars?

[yoyo837]

Can you provide some example code of using link tags to get css vars?

https://codesandbox.io/p/sandbox/vant-4-issue-template-forked-jk5tdd?file=%2Fsrc%2FApp.vue%3A44%2C18

[yoyo837]

Ask a question: Why does each component's css file not include the css of other components it depends on?

For example:

[chenjiahan]

Why does each component's css file not include the css of other components it depends on?

The dependency graph of CSS is automatically generated, which means that we don't need to manually maintain the import order of CSS.

[chenjiahan]

This is not a documented approach, can we just import the vant/lib/index.css or vant/lib/tabs/style?

<link rel="stylesheet" href="https://unpkg.com/[email protected]/es/tabs/index.css" />

[yoyo837]

This is not a documented approach

Yes, I know this.

Can we just import the vant/lib/index.css ?

No, vant/lib/index.css only provides :root css variables, It should to provide :host css variables. This is exactly what the current PR wants to do.

or vant/lib/tabs/style?

No, The link tag cannot use js resources.

---

Finally, the reason why I asked the question at the above,it is to consider import on demand.

[chenjiahan]

On-demand importing should not be achieved through the use of the link tag, as the link tag is unable to deduplicate modules or manage the order of the module graph.

[yoyo837]

On-demand importing should not be achieved through the use of the link tag, as the link tag is unable to deduplicate modules or manage the order of the module graph.

So what are your thoughts on using vant for Shadow DOM? Even if the solution is not perfect, thank you very much.

Although vant has stated that it will not compatible to Shadow DOM, it still hopes to accept this PR. I will write the other build tools or plugins myself to achieve the goal.

[yoyo837]

Thanks for merging this.

[chenjiahan]

So what are your thoughts on using vant for Shadow DOM?

I have no idea at the moment as I have no experience with web components, but PRs are welcome for the improvement of Vant's support for web components. 😄

[yoyo837]

I will. Thanks for accepting this point.

[yoyo837]

Excuse me, when is the next release date?

[chenjiahan]

I'm going to release a new version this week.