@playcanvas/web-components 0.2.6 → 0.2.7

package/README.md

@@ -5,7 +5,7 @@
 [![License](https://img.shields.io/npm/l/@playcanvas/web-components.svg)](https://github.com/playcanvas/web-components/blob/main/LICENSE)
 [![GitHub Actions Build Status](https://github.com/playcanvas/web-components/actions/workflows/deploy.yml/badge.svg)](https://github.com/playcanvas/web-components/actions/workflows/deploy.yml)
 
-| [User Guide](https://developer.playcanvas.com/user-manual/engine/web-components) | [API Reference](https://api.playcanvas.com/web-components/) | [Examples](https://playcanvas.github.io/web-components/examples) | [Blog](https://blog.playcanvas.com/) | [Forum](https://forum.playcanvas.com/) | [Discord](https://discord.gg/RSaMRzg) |
+| [User Guide](https://developer.playcanvas.com/user-manual/web-components) | [API Reference](https://api.playcanvas.com/web-components/) | [Examples](https://playcanvas.github.io/web-components/examples) | [Blog](https://blog.playcanvas.com/) | [Forum](https://forum.playcanvas.com/) | [Discord](https://discord.gg/RSaMRzg) |
 
 PlayCanvas Web Components are a set of custom HTML elements for building 3D interactive web apps. Using the declarative nature of HTML makes it both easy and fun to incorporate 3D into your website. Check out this simple example:
 

package/dist/app.d.ts

@@ -1,8 +1,8 @@
-import { Application } from 'playcanvas';
+import { AppBase } from 'playcanvas';
 import { AsyncElement } from './async-element';
 /**
  * The AppElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-app/ | `<pc-app>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-app/ | `<pc-app>`} elements.
  * The AppElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -12,6 +12,7 @@ declare class AppElement extends AsyncElement {
      */
     private _canvas;
     private _alpha;
+    private _backend;
     private _antialias;
     private _depth;
     private _stencil;
@@ -24,7 +25,7 @@ declare class AppElement extends AsyncElement {
     /**
      * The PlayCanvas application instance.
      */
-    app: Application | null;
+    app: AppBase | null;
     /**
      * Creates a new AppElement instance.
      *
@@ -62,6 +63,16 @@ declare class AppElement extends AsyncElement {
      * @returns The antialias flag.
      */
     get antialias(): boolean;
+    /**
+     * Sets the graphics backend.
+     * @param value - The graphics backend ('webgpu', 'webgl2', or 'null').
+     */
+    set backend(value: 'webgpu' | 'webgl2' | 'null');
+    /**
+     * Gets the graphics backend.
+     * @returns The graphics backend.
+     */
+    get backend(): "webgpu" | "webgl2" | "null";
     /**
      * Sets the depth flag.
      * @param value - The depth flag.

package/dist/asset.d.ts

@@ -1,7 +1,7 @@
 import { Asset } from 'playcanvas';
 /**
  * The AssetElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-asset/ | `<pc-asset>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-asset/ | `<pc-asset>`} elements.
  * The AssetElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */

package/dist/components/camera-component.d.ts

@@ -2,7 +2,7 @@ import { CameraComponent, Color, Vec4 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The CameraComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-camera/ | `<pc-camera>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-camera/ | `<pc-camera>`} elements.
  * The CameraComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/collision-component.d.ts

@@ -2,7 +2,7 @@ import { CollisionComponent, Quat, Vec3 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The CollisionComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-collision/ | `<pc-collision>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-collision/ | `<pc-collision>`} elements.
  * The CollisionComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/element-component.d.ts

@@ -2,7 +2,7 @@ import { Color, ElementComponent, Vec2, Vec4 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The ElementComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-element/ | `<pc-element>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-element/ | `<pc-element>`} elements.
  * The ElementComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/light-component.d.ts

@@ -2,7 +2,7 @@ import { Color, LightComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The LightComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-light/ | `<pc-light>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-light/ | `<pc-light>`} elements.
  * The LightComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/listener-component.d.ts

@@ -2,7 +2,7 @@ import { AudioListenerComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The ListenerComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-listener/ | `<pc-listener>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-listener/ | `<pc-listener>`} elements.
  * The ListenerComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/particlesystem-component.d.ts

@@ -2,7 +2,7 @@ import { ParticleSystemComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The ParticleSystemComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
  * The ParticleSystemComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/render-component.d.ts

@@ -2,7 +2,7 @@ import { RenderComponent, StandardMaterial } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The RenderComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-render/ | `<pc-render>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-render/ | `<pc-render>`} elements.
  * The RenderComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/rigidbody-component.d.ts

@@ -2,7 +2,7 @@ import { RigidBodyComponent, Vec3 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The RigidBodyComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-rigidbody/ | `<pc-rigidbody>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-rigidbody/ | `<pc-rigidbody>`} elements.
  * The RigidBodyComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/screen-component.d.ts

@@ -2,7 +2,7 @@ import { ScreenComponent, Vec2 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The ScreenComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-screen/ | `<pc-screen>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-screen/ | `<pc-screen>`} elements.
  * The ScreenComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/script-component.d.ts

@@ -18,7 +18,7 @@ declare global {
 }
 /**
  * The ScriptComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
  * The ScriptComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/sound-component.d.ts

@@ -2,7 +2,7 @@ import { SoundComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The SoundComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
  * The SoundComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/components/splat-component.d.ts

@@ -2,7 +2,7 @@ import { GSplatComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * The SplatComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-splat/ | `<pc-splat>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-splat/ | `<pc-splat>`} elements.
  * The SplatComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *

package/dist/entity.d.ts

@@ -1,8 +1,8 @@
-import { Application, Entity, Vec3 } from 'playcanvas';
+import { AppBase, Entity, Vec3 } from 'playcanvas';
 import { AsyncElement } from './async-element';
 /**
  * The EntityElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
  * The EntityElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -39,8 +39,8 @@ declare class EntityElement extends AsyncElement {
      * The PlayCanvas entity instance.
      */
     entity: Entity | null;
-    createEntity(app: Application): void;
-    buildHierarchy(app: Application): void;
+    createEntity(app: AppBase): void;
+    buildHierarchy(app: AppBase): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**

package/dist/material.d.ts

@@ -1,7 +1,7 @@
 import { Color, StandardMaterial } from 'playcanvas';
 /**
  * The MaterialElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-material/ | `<pc-material>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-material/ | `<pc-material>`} elements.
  * The MaterialElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */

package/dist/model.d.ts

@@ -1,7 +1,7 @@
 import { AsyncElement } from './async-element';
 /**
  * The ModelElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-model/ | `<pc-model>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-model/ | `<pc-model>`} elements.
  * The ModelElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */

package/dist/module.d.ts

@@ -1,6 +1,6 @@
 /**
  * The ModuleElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-module/ | `<pc-module>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-module/ | `<pc-module>`} elements.
  * The ModuleElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */

package/dist/pwc.cjs

@@ -40,7 +40,7 @@ class AsyncElement extends HTMLElement {
 
 /**
  * The ModuleElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-module/ | `<pc-module>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-module/ | `<pc-module>`} elements.
  * The ModuleElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -74,7 +74,7 @@ customElements.define('pc-module', ModuleElement);
 
 /**
  * The AppElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-app/ | `<pc-app>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-app/ | `<pc-app>`} elements.
  * The AppElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -91,6 +91,7 @@ class AppElement extends AsyncElement {
          */
         this._canvas = null;
         this._alpha = true;
+        this._backend = 'webgl2';
         this._antialias = true;
         this._depth = true;
         this._stencil = true;
@@ -125,18 +126,84 @@ class AppElement extends AsyncElement {
         // Create and append the canvas to the element
         this._canvas = document.createElement('canvas');
         this.appendChild(this._canvas);
-        // Initialize the PlayCanvas application
-        this.app = new playcanvas.Application(this._canvas, {
-            graphicsDeviceOptions: {
-                alpha: this._alpha,
-                antialias: this._antialias,
-                depth: this._depth,
-                stencil: this._stencil
-            },
-            keyboard: new playcanvas.Keyboard(window),
-            mouse: new playcanvas.Mouse(this._canvas)
+        // Configure device types based on backend selection
+        const backendToDeviceTypes = {
+            webgpu: ['webgpu', 'webgl2'], // fallback to webgl2 if webgpu not available
+            webgl2: ['webgl2'],
+            null: ['null']
+        };
+        const deviceTypes = backendToDeviceTypes[this._backend] || [];
+        const device = await playcanvas.createGraphicsDevice(this._canvas, {
+            // @ts-ignore - alpha needs to be documented
+            alpha: this._alpha,
+            antialias: this._antialias,
+            depth: this._depth,
+            deviceTypes: deviceTypes,
+            stencil: this._stencil
         });
-        this.app.graphicsDevice.maxPixelRatio = this._highResolution ? window.devicePixelRatio : 1;
+        device.maxPixelRatio = this._highResolution ? window.devicePixelRatio : 1;
+        const createOptions = new playcanvas.AppOptions();
+        createOptions.graphicsDevice = device;
+        createOptions.keyboard = new playcanvas.Keyboard(window);
+        createOptions.mouse = new playcanvas.Mouse(this._canvas);
+        createOptions.componentSystems = [
+            playcanvas.AnimComponentSystem,
+            playcanvas.AnimationComponentSystem,
+            playcanvas.AudioListenerComponentSystem,
+            playcanvas.ButtonComponentSystem,
+            playcanvas.CameraComponentSystem,
+            playcanvas.CollisionComponentSystem,
+            playcanvas.ElementComponentSystem,
+            playcanvas.GSplatComponentSystem,
+            playcanvas.JointComponentSystem,
+            playcanvas.LayoutChildComponentSystem,
+            playcanvas.LayoutGroupComponentSystem,
+            playcanvas.LightComponentSystem,
+            playcanvas.ModelComponentSystem,
+            playcanvas.ParticleSystemComponentSystem,
+            playcanvas.RenderComponentSystem,
+            playcanvas.RigidBodyComponentSystem,
+            playcanvas.ScreenComponentSystem,
+            playcanvas.ScriptComponentSystem,
+            playcanvas.ScrollbarComponentSystem,
+            playcanvas.ScrollViewComponentSystem,
+            playcanvas.SoundComponentSystem,
+            playcanvas.SpriteComponentSystem,
+            playcanvas.ZoneComponentSystem
+        ];
+        createOptions.resourceHandlers = [
+            playcanvas.AnimClipHandler,
+            playcanvas.AnimationHandler,
+            playcanvas.AnimStateGraphHandler,
+            playcanvas.AudioHandler,
+            playcanvas.BinaryHandler,
+            playcanvas.CssHandler,
+            playcanvas.ContainerHandler,
+            playcanvas.CubemapHandler,
+            playcanvas.FolderHandler,
+            playcanvas.FontHandler,
+            playcanvas.GSplatHandler,
+            playcanvas.HierarchyHandler,
+            playcanvas.HtmlHandler,
+            playcanvas.JsonHandler,
+            playcanvas.MaterialHandler,
+            playcanvas.ModelHandler,
+            playcanvas.RenderHandler,
+            playcanvas.ScriptHandler,
+            playcanvas.SceneHandler,
+            playcanvas.ShaderHandler,
+            playcanvas.SpriteHandler,
+            playcanvas.TemplateHandler,
+            playcanvas.TextHandler,
+            playcanvas.TextureAtlasHandler,
+            playcanvas.TextureHandler
+        ];
+        createOptions.soundManager = new playcanvas.SoundManager();
+        createOptions.lightmapper = playcanvas.Lightmapper;
+        createOptions.batchManager = playcanvas.BatchManager;
+        createOptions.xr = playcanvas.XrManager;
+        this.app = new playcanvas.AppBase(this._canvas);
+        this.app.init(createOptions);
         this.app.setCanvasFillMode(playcanvas.FILLMODE_FILL_WINDOW);
         this.app.setCanvasResolution(playcanvas.RESOLUTION_AUTO);
         this._pickerCreate();
@@ -364,6 +431,20 @@ class AppElement extends AsyncElement {
     get antialias() {
         return this._antialias;
     }
+    /**
+     * Sets the graphics backend.
+     * @param value - The graphics backend ('webgpu', 'webgl2', or 'null').
+     */
+    set backend(value) {
+        this._backend = value;
+    }
+    /**
+     * Gets the graphics backend.
+     * @returns The graphics backend.
+     */
+    get backend() {
+        return this._backend;
+    }
     /**
      * Sets the depth flag.
      * @param value - The depth flag.
@@ -419,7 +500,7 @@ class AppElement extends AsyncElement {
         return this._stencil;
     }
     static get observedAttributes() {
-        return ['alpha', 'antialias', 'depth', 'stencil', 'high-resolution'];
+        return ['alpha', 'antialias', 'backend', 'depth', 'stencil', 'high-resolution'];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         switch (name) {
@@ -429,6 +510,11 @@ class AppElement extends AsyncElement {
             case 'antialias':
                 this.antialias = newValue !== 'false';
                 break;
+            case 'backend':
+                if (newValue === 'webgpu' || newValue === 'webgl2' || newValue === 'null') {
+                    this.backend = newValue;
+                }
+                break;
             case 'depth':
                 this.depth = newValue !== 'false';
                 break;
@@ -658,7 +744,7 @@ const parseVec4 = (value) => {
 
 /**
  * The EntityElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
  * The EntityElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -1195,7 +1281,7 @@ const processBufferView = (gltfBuffer, buffers, continuation) => {
 };
 /**
  * The AssetElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-asset/ | `<pc-asset>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-asset/ | `<pc-asset>`} elements.
  * The AssetElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -1357,7 +1443,7 @@ class ComponentElement extends AsyncElement {
 
 /**
  * The ListenerComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-listener/ | `<pc-listener>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-listener/ | `<pc-listener>`} elements.
  * The ListenerComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -1389,7 +1475,7 @@ const tonemaps = new Map([
 ]);
 /**
  * The CameraComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-camera/ | `<pc-camera>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-camera/ | `<pc-camera>`} elements.
  * The CameraComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -1870,7 +1956,7 @@ customElements.define('pc-camera', CameraComponentElement);
 
 /**
  * The CollisionComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-collision/ | `<pc-collision>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-collision/ | `<pc-collision>`} elements.
  * The CollisionComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -2017,7 +2103,7 @@ customElements.define('pc-collision', CollisionComponentElement);
 
 /**
  * The ElementComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-element/ | `<pc-element>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-element/ | `<pc-element>`} elements.
  * The ElementComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -2322,7 +2408,7 @@ const shadowTypes = new Map([
 ]);
 /**
  * The LightComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-light/ | `<pc-light>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-light/ | `<pc-light>`} elements.
  * The LightComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -2719,7 +2805,7 @@ customElements.define('pc-light', LightComponentElement);
 
 /**
  * The ParticleSystemComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
  * The ParticleSystemComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -2851,7 +2937,7 @@ customElements.define('pc-particles', ParticleSystemComponentElement);
 
 /**
  * The MaterialElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-material/ | `<pc-material>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-material/ | `<pc-material>`} elements.
  * The MaterialElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -2968,7 +3054,7 @@ customElements.define('pc-material', MaterialElement);
 
 /**
  * The RenderComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-render/ | `<pc-render>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-render/ | `<pc-render>`} elements.
  * The RenderComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -3091,7 +3177,7 @@ customElements.define('pc-render', RenderComponentElement);
 
 /**
  * The RigidBodyComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-rigidbody/ | `<pc-rigidbody>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-rigidbody/ | `<pc-rigidbody>`} elements.
  * The RigidBodyComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -3279,7 +3365,7 @@ customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
 /**
  * The ScreenComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-screen/ | `<pc-screen>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-screen/ | `<pc-screen>`} elements.
  * The ScreenComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -3406,7 +3492,7 @@ customElements.define('pc-screen', ScreenComponentElement);
 
 /**
  * The ScriptComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
  * The ScriptComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -3714,7 +3800,7 @@ customElements.define('pc-script', ScriptElement);
 
 /**
  * The SoundComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
  * The SoundComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -3948,6 +4034,9 @@ class SoundSlotElement extends AsyncElement {
         }
         this.soundSlot = this.soundElement.component.addSlot(this._name, options);
         this.asset = this._asset;
+        if (this._autoPlay) {
+            this.soundSlot.play();
+        }
         this._onReady();
     }
     disconnectedCallback() {
@@ -4157,7 +4246,7 @@ customElements.define('pc-sound', SoundSlotElement);
 
 /**
  * The SplatComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-splat/ | `<pc-splat>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-splat/ | `<pc-splat>`} elements.
  * The SplatComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -4241,7 +4330,7 @@ customElements.define('pc-splat', SplatComponentElement);
 
 /**
  * The ModelElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-model/ | `<pc-model>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-model/ | `<pc-model>`} elements.
  * The ModelElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -4337,7 +4426,7 @@ customElements.define('pc-model', ModelElement);
 
 /**
  * The SceneElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-scene/ | `<pc-scene>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scene/ | `<pc-scene>`} elements.
  * The SceneElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */