defineCustomElement() Definir um custom element
Última atualização: 2026-10-22
defineCustomElement() Definir um custom element
defineCustomElement() empacota um componente Vue como um custom element baseado em padrões, utilizável em qualquer página ou framework.
| Grupo | Funções de Renderização e SSR |
|---|---|
| Tipo | API |
| Escopo | Global |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
const MyEl = defineCustomElement({ props: { msg: String }, template: "<p>{{ msg }}</p>" })
customElements.define("my-element", MyEl)⚙️ Argumentos
| options | Uma definição de componente (suporta array styles) |
|---|
Retorno：Uma classe de custom element para customElements.define
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Renders 'from a custom element'.💡 Pontos-chave
ℹ️ Nota Ótimo para compartilhar componentes de design system entre frameworks.
💡 Dica A opção styles injeta CSS no shadow root.
⚠️ Aviso Os props precisam ser declarados para poderem ser definidos como propriedades do elemento.
🏷️ Funções de Renderização e SSR relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Quando é útil?
R Ao reutilizar componentes fora do Vue ou publicar web components.
P Os estilos vazam?
R O Shadow DOM isola os estilos; caso contrário, eles são globais.
P Dá para usar dentro do Vue também?
R Dá, embora componentes comuns sejam mais simples.
