> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: $w

## Namespace: custom-element

## Article: Introduction

## Article Link: https://dev.wix.com/docs/velo/velo-only-apis/$w/custom-element/introduction.md

## Article Content:

# Introduction
Custom elements are web components that let you add custom HTML, CSS, and JavaScript to extend your site's functionality beyond the built-in editor. 
They follow the [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) standard 
and can integrate with any JavaScript ES6 library or framework that follows HTML5 standards.

You may want to use custom elements in the following scenarios:
 * Build advanced components with functionality beyond standard offerings.
 * Implement custom CSS for greater design flexibility.
 * Create reusable components for consistency across multiple projects.

 ### How to work with custom elements

 The following steps describe the general flow for working with custom elements:

 1. Code the custom element in a JavaScript file using any IDE.
 1. In the site editor, [add the custom element to the site](https://dev.wix.com/docs/velo/velo-only-apis/$w/custom-element/add-a-custom-element.md).
 1. Using Velo, [handle events and pass data between your site and the custom element](https://dev.wix.com/docs/velo/velo-only-apis/$w/custom-element/handle-events.md).

### Hosting

You can host custom elements on Wix or an external server.

* **Wix-hosted (recommended)**: Integrates directly with your Wix site, simplifies deployment, and ensures compatibility with Wix's infrastructure.
* **Externally-hosted**: Provides full flexibility but requires HTTPS and proper configuration to communicate with your Wix site.

> **Note:** You can use third-party custom elements so long as you have their server URL and tag name.

### SEO

SEO for custom elements is handled through Velo code by defining [`seoMarkup`](https://dev.wix.com/docs/velo/api-reference/$w/custom-element/seo-markup.md).
This approach applies to both Wix-hosted and externally-hosted elements. Without proper SEO markup, only JavaScript-enabled crawlers, like Google, will index the content.

<blockquote class="caution">

**Caution:** To avoid issues like cloaking, ensure that the content in your custom element matches the defined SEO markup.

</blockquote>

### Troubleshooting

 If you're experiencing issues with custom elements, consider the following potential causes:
 
 * To use custom elements on your live site, you must have a Premium Plan, connect a custom domain, and remove ads. This only applies to custom elements on sites not apps.
 * A custom element may not be visible if browser settings block communication between the local development environment and the server.
 * Custom elements might appear differently in preview and live sites because they are rendered in an iframe during editor and preview modes.
 * Custom elements can alter the page layout by modifying the page height.
 * Custom elements might not work as expected if the site isn't using HTTPS.