update sfc custom element usage

Author: yyx990803

src/guide/web-components.md

@@ -165,21 +165,26 @@ The [Provide / Inject API](/guide/component-provide-inject.html#provide-inject)
 
 ### SFC as Custom Element
 
-The official build toolchains have built-in support for importing Vue Single File Components (SFCs) as custom elements. By default, files ending in `*.ce.vue` will be processed as native custom elements when imported (created with `defineCustomElement`):
+`defineCustomElement` also works with Vue Single File Components (SFCs). However, with the default tooling setup, the `<style>` inside the SFCs will still be extracted and merged into a single CSS file during production build. When using an SFC as a custom element, it is often desirable to inject the `<style>` tags into the custom element's shadow root instead.
+
+The official SFC toolings support importing SFCs in "custom element mode" (requires `@vitejs/plugin-vue@^1.4.0` or `vue-loader@^16.5.0`). An SFC loaded in custom element mode inlines its `<style>` tags as strings of CSS and exposes them under the component's `styles` option. This will be picked up by `defineCustomElement` and injected into the element's shadow root when instantiated.
+
+To opt-in to this mode, simply end your component file name with `.ce.vue`:
 
 ```js
+import { defineCustomElement } from 'vue'
 import Example from './Example.ce.vue'
 
-// register
-customElements.define('my-example', Example)
+console.log(Example.styles) // ["/* inlined css */"]
 
-// can also be instantiated
-const myExample = new Example()
-```
+// convert into custom element constructor
+const ExampleElement = defineCustomElement(Example)
 
-When imported as custom elements, `<style>` inside the SFC will be inlined as JavaScript strings and inserted as a native `<style>` tag inside the custom element's shadow root.
+// register
+customElements.define('my-example', ExampleElement)
+```
 
-If you wish to customize what files should be imported as custom elements (for example treating _all_ SFCs as custom elements), you can pass the `customElement` option to the respective build plugins:
+If you wish to customize what files should be imported in custom element mode (for example treating _all_ SFCs as custom elements), you can pass the `customElement` option to the respective build plugins:
 
 - [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#using-vue-sfcs-as-custom-elements)
 - [vue-loader](https://github.com/vuejs/vue-loader/tree/next#v16-only-options)
@@ -193,8 +198,12 @@ If the custom elements will be used in an application that is also using Vue, yo
 It is recommended to export the individual element constructors to give your users the flexibility to import them on-demand and register them with desired tag names. You can also export a convenience function to automatically register all elements. Here's an example entry point of a Vue custom element library:
 
 ```js
-import MyFoo from './MyFoo.ce.vue'
-import MyBar from './MyBar.ce.bar'
+import { defineCustomElement } from 'vue'
+import Foo from './MyFoo.ce.vue'
+import Bar from './MyBar.ce.bar'
+
+const MyFoo = defineCustomElement(Foo)
+const MyBar = defineCustomElement(Bar)
 
 // export individual elements
 export { MyFoo, MyBar }
@@ -205,6 +214,8 @@ export function register() {
 }
 ```
 
+If you have many components, you can also leverage build tool features such as Vite's [glob import](https://vitejs.dev/guide/features.html#glob-import) or webpack's [`require.context`](https://webpack.js.org/guides/dependency-management/#requirecontext) to load all components from a directory.
+
 ## Web Components vs. Vue Components
 
 Some developers believe that framework-proprietary component models should be avoided, and that exclusively using Custom Elements makes an application "future-proof". Here we will try to explain why we believe that this is an overly simplistic take on the problem.