feat(custom-element): Support css :host selector

[baiwusanyu-c]

close: #8826

[baiwusanyu-c]

In this pr, if sfc is rendered as a custom element, the css variables of its normal element tags (div, span...) will be promoted to the style attribute of the tag of the custom element, and it is compatible with pr #7942

// before
<my-custom-el>
  <span style="--color: red;"> hello </span>
</my-custom-el>

// after
<my-custom-el style="--color: red;">
  <span> hello </span>
</my-custom-el>

[felbry]

哎 快点合并吧 这个问题严重阻塞开发进度了

[rocifier]

I like it. Is there any way to promote a normal css style like display to the host element, or do they have to be re-written as css variables?

Does this work for any size component?

What about child components, would the propagation stop at their root element?

What if there are multiple root elements?

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	97.7 kB (+7.51 kB)	37.1 kB (+2.54 kB)	33.4 kB (+2.23 kB)
vue.global.prod.js	155 kB (+8.48 kB)	56.9 kB (+2.81 kB)	50.5 kB (+2.47 kB)

Usages

Name	Size	Gzip	Brotli
createApp	53.9 kB (+4.23 kB)	20.9 kB (+1.4 kB)	19 kB (+1.24 kB)
createSSRApp	57.8 kB (+4.57 kB)	22.5 kB (+1.52 kB)	20.5 kB (+1.35 kB)
defineCustomElement	57.5 kB (+5.61 kB)	22.1 kB (+1.84 kB)	20.1 kB (+1.62 kB)
overall	67.4 kB (+4.28 kB)	25.9 kB (+1.41 kB)	23.6 kB (+1.3 kB)

[codspeed-hq]

CodSpeed Performance Report

Merging #8830 will not alter performance

_{Comparing baiwusanyu-c:bwsy/fix/CEHostSelector (0308e0d) with main (bae79dd)}

Summary

✅ 53 untouched benchmarks