update sfc custom element usage

Author: yyx990803

src/guide/web-components.md

@@ -165,21 +165,28 @@ 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)
+
+// register
+customElements.define('my-example', ExampleElement)
 ```
 
-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.
 
-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)