Methods
# registerWebComponent(opts)
Convert a Svelte component into a Web Component for A-Frame.
Provides the wrapperElement context to the Svelte component with a reference to the containing custom element instance.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
opts |
object
|
||
Component |
function
|
the Svelte component constructor |
|
tagname |
string
|
the element tag for the Web Component, must contain a '-' |
|
props |
Array.<string>
|
<optional> |
the prop names from the Svelte copmonent which will be settable via HTML attributes (auto-converted between camelCase an dash-case) |
baseClass |
HTMLElement
|
<optional> |
base class that Web Component element will inherit from, default's to AEntity |
noWraper |
boolean
|
<optional> |
EXPERIMENTAL: render the Svelte component output as siblings to the Web Component element instead of as children |
Examples
Basic usage
// creates and registers the <a-person> custom element from the APerson.svelte component
import { registerWebComponent } from 'svawc'
import APerson from "./APerson.svelte"
registerWebComponent({ component: APerson, tagname: "a-person", attributes: ["skin", "shirt", "pants"] })Using context to modify the containing element from inside the Svelte component
import { getContext } from "svelte";
getContext('wrapperElement').setAttribute('shadow', '')