@playcanvas/web-components 0.9.0 → 0.10.1

package/src/components/button-component.ts

@@ -2,7 +2,7 @@ import { BUTTON_TRANSITION_MODE_SPRITE_CHANGE, BUTTON_TRANSITION_MODE_TINT, Butt
 
 import { AssetElement } from '../asset';
 import { ComponentElement } from './component';
-import { getEntity, parseBool, parseColor, parseEnum, parseNumber, parseVec4 } from '../utils';
+import { getEntity, parseBool, parseColor, parseEnum, parseNumber, parseVec4 } from '../parse';
 
 const transitionModes = new Map<'tint' | 'sprite', number>([
     ['tint', BUTTON_TRANSITION_MODE_TINT],
@@ -396,7 +396,7 @@ class ButtonComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
@@ -404,7 +404,7 @@ class ButtonComponentElement extends ComponentElement {
                 this.active = parseBool(newValue, true);
                 break;
             case 'image':
-                this.image = newValue;
+                this.image = newValue ?? '';
                 break;
             case 'hit-padding':
                 this.hitPadding = parseVec4(newValue, Vec4.ZERO, name);
@@ -425,19 +425,19 @@ class ButtonComponentElement extends ComponentElement {
                 this.fadeDuration = parseNumber(newValue, 0, name);
                 break;
             case 'hover-sprite-asset':
-                this.hoverSpriteAsset = newValue;
+                this.hoverSpriteAsset = newValue ?? '';
                 break;
             case 'hover-sprite-frame':
                 this.hoverSpriteFrame = parseNumber(newValue, 0, name);
                 break;
             case 'pressed-sprite-asset':
-                this.pressedSpriteAsset = newValue;
+                this.pressedSpriteAsset = newValue ?? '';
                 break;
             case 'pressed-sprite-frame':
                 this.pressedSpriteFrame = parseNumber(newValue, 0, name);
                 break;
             case 'inactive-sprite-asset':
-                this.inactiveSpriteAsset = newValue;
+                this.inactiveSpriteAsset = newValue ?? '';
                 break;
             case 'inactive-sprite-frame':
                 this.inactiveSpriteFrame = parseNumber(newValue, 0, name);

package/src/components/camera-component.ts

@@ -1,7 +1,7 @@
 import { CameraComponent, Color, Vec4, GAMMA_NONE, GAMMA_SRGB, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_NEUTRAL, TONEMAP_ACES2, TONEMAP_ACES, TONEMAP_HEJL, TONEMAP_NONE, XRTYPE_VR } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseColor, parseEnum, parseNumber, parseVec4 } from '../utils';
+import { parseBool, parseColor, parseEnum, parseNumber, parseVec4 } from '../parse';
 
 const tonemaps = new Map<'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral', number>([
     ['none', TONEMAP_NONE],
@@ -490,7 +490,7 @@ class CameraComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/collision-component.ts

@@ -1,7 +1,7 @@
 import { CollisionComponent, Quat, Vec3 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseEnum, parseNumber, parseQuat, parseVec3 } from '../utils';
+import { parseBool, parseEnum, parseNumber, parseQuat, parseVec3 } from '../parse';
 
 /**
  * The CollisionComponentElement interface provides properties and methods for manipulating
@@ -146,7 +146,7 @@ class CollisionComponentElement extends ComponentElement {
         return [...super.observedAttributes, 'angular-offset', 'axis', 'convex-hull', 'half-extents', 'height', 'linear-offset', 'radius', 'type'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/component.ts

@@ -2,7 +2,7 @@ import { Component } from 'playcanvas';
 
 import { AppElement } from '../app';
 import { AsyncElement } from '../async-element';
-import { parseBool } from '../utils';
+import { parseBool } from '../parse';
 
 /**
  * Represents a component in the PlayCanvas engine.
@@ -73,12 +73,13 @@ class ComponentElement extends AsyncElement {
     }
 
     /**
-     * The PlayCanvas component instance. Available once the element is ready — await
-     * {@link whenReady} or the element's `ready()` promise before accessing it.
-     * @returns The component instance.
+     * The PlayCanvas component instance. `null` until the element is ready, and also for an
+     * element that is not a descendant of a `<pc-entity>` — await {@link whenReady} or the
+     * element's `ready()` promise before accessing it.
+     * @returns The component instance, or `null`.
      */
-    get component(): Component {
-        return this._component!;
+    get component(): Component | null {
+        return this._component;
     }
 
     /**
@@ -104,7 +105,7 @@ class ComponentElement extends AsyncElement {
         return ['enabled'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         switch (name) {
             case 'enabled':
                 this.enabled = parseBool(newValue, true);

package/src/components/element-component.ts

@@ -2,7 +2,7 @@ import { Color, ElementComponent, Vec2, Vec4 } from 'playcanvas';
 
 import { AssetElement } from '../asset';
 import { ComponentElement } from './component';
-import { parseBool, parseColor, parseEnum, parseNumber, parseVec2, parseVec4 } from '../utils';
+import { parseBool, parseColor, parseEnum, parseNumber, parseVec2, parseVec4 } from '../parse';
 
 /**
  * The ElementComponentElement interface provides properties and methods for manipulating
@@ -686,7 +686,7 @@ class ElementComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
@@ -712,7 +712,7 @@ class ElementComponentElement extends ComponentElement {
                 this.enableMarkup = parseBool(newValue, false);
                 break;
             case 'font-asset':
-                this.fontAsset = newValue;
+                this.fontAsset = newValue ?? '';
                 break;
             case 'font-size':
                 this.fontSize = parseNumber(newValue, 32, name);
@@ -745,16 +745,16 @@ class ElementComponentElement extends ComponentElement {
                 this.pixelsPerUnit = parseNumber(newValue, null, name);
                 break;
             case 'sprite-asset':
-                this.spriteAsset = newValue;
+                this.spriteAsset = newValue ?? '';
                 break;
             case 'sprite-frame':
                 this.spriteFrame = parseNumber(newValue, 0, name);
                 break;
             case 'text':
-                this.text = newValue;
+                this.text = newValue ?? '';
                 break;
             case 'texture-asset':
-                this.textureAsset = newValue;
+                this.textureAsset = newValue ?? '';
                 break;
             case 'type':
                 this.type = parseEnum(newValue, ['group', 'image', 'text'], 'group', name);

package/src/components/gsplat-component.ts

@@ -2,7 +2,7 @@ import { GSplatComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
 import { AssetElement } from '../asset';
-import { parseBool, parseNumber } from '../utils';
+import { parseBool, parseNumber } from '../parse';
 
 /**
  * The GSplatComponentElement interface provides properties and methods for manipulating
@@ -188,12 +188,12 @@ class GSplatComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
             case 'asset':
-                this.asset = newValue;
+                this.asset = newValue ?? '';
                 break;
             case 'cast-shadows':
                 this.castShadows = parseBool(newValue, false);

package/src/components/layoutchild-component.ts

@@ -1,7 +1,7 @@
 import { LayoutChildComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseNumber } from '../utils';
+import { parseBool, parseNumber } from '../parse';
 
 /**
  * The LayoutChildComponentElement interface provides properties and methods for manipulating
@@ -199,7 +199,7 @@ class LayoutChildComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/layoutgroup-component.ts

@@ -1,7 +1,7 @@
 import { FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, LayoutGroupComponent, ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL, Vec2, Vec4 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseEnum, parseVec2, parseVec4 } from '../utils';
+import { parseBool, parseEnum, parseVec2, parseVec4 } from '../parse';
 
 const orientations = new Map<'horizontal' | 'vertical', number>([
     ['horizontal', ORIENTATION_HORIZONTAL],
@@ -258,7 +258,7 @@ class LayoutGroupComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/light-component.ts

@@ -1,7 +1,7 @@
 import { Color, LightComponent, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF3_32F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_PCSS_32F, SHADOW_VSM_16F, SHADOW_VSM_32F } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseColor, parseEnum, parseNumber } from '../utils';
+import { parseBool, parseColor, parseEnum, parseNumber } from '../parse';
 
 const shadowTypes = new Map<'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f', number>([
     ['pcf1-16f', SHADOW_PCF1_16F],
@@ -496,7 +496,7 @@ class LightComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/particlesystem-component.ts

@@ -139,12 +139,12 @@ class ParticleSystemComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
             case 'asset':
-                this.asset = newValue;
+                this.asset = newValue ?? '';
                 break;
         }
     }

package/src/components/render-component.ts

@@ -2,7 +2,7 @@ import { RenderComponent, StandardMaterial } from 'playcanvas';
 
 import { ComponentElement } from './component';
 import { MaterialElement } from '../material';
-import { parseBool, parseEnum } from '../utils';
+import { parseBool, parseEnum } from '../parse';
 
 /**
  * The RenderComponentElement interface provides properties and methods for manipulating
@@ -91,8 +91,13 @@ class RenderComponentElement extends ComponentElement {
      */
     set material(value: string) {
         this._material = value;
-        if (this.component) {
-            this.component.material = MaterialElement.get(value) as StandardMaterial;
+        const material = MaterialElement.get(value);
+        // Guarded like every other reference attribute in the library. Assigning an unresolved
+        // lookup used to write `undefined` straight through to every mesh instance, and the
+        // engine's MeshInstance setter takes that literally - it clears the material and skips
+        // the ref/transparency/key bookkeeping, leaving the mesh with no material at all.
+        if (this.component && material) {
+            this.component.material = material as StandardMaterial;
         }
     }
 
@@ -127,7 +132,7 @@ class RenderComponentElement extends ComponentElement {
         return [...super.observedAttributes, 'cast-shadows', 'material', 'receive-shadows', 'type'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
@@ -135,7 +140,7 @@ class RenderComponentElement extends ComponentElement {
                 this.castShadows = parseBool(newValue, true);
                 break;
             case 'material':
-                this.material = newValue;
+                this.material = newValue ?? '';
                 break;
             case 'receive-shadows':
                 this.receiveShadows = parseBool(newValue, true);

package/src/components/rigidbody-component.ts

@@ -1,7 +1,7 @@
 import { RigidBodyComponent, Vec3 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseEnum, parseNumber, parseVec3 } from '../utils';
+import { parseEnum, parseNumber, parseVec3 } from '../parse';
 
 /**
  * The RigidBodyComponentElement interface provides properties and methods for manipulating
@@ -187,7 +187,7 @@ class RigidBodyComponentElement extends ComponentElement {
         return [...super.observedAttributes, 'angular-damping', 'angular-factor', 'friction', 'linear-damping', 'linear-factor', 'mass', 'restitution', 'rolling-friction', 'type'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/screen-component.ts

@@ -1,7 +1,7 @@
 import { SCALEMODE_BLEND, SCALEMODE_NONE, ScreenComponent, Vec2 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseNumber, parseVec2 } from '../utils';
+import { parseBool, parseNumber, parseVec2 } from '../parse';
 
 /**
  * The ScreenComponentElement interface provides properties and methods for manipulating
@@ -126,7 +126,7 @@ class ScreenComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/script-component.ts

@@ -3,7 +3,7 @@ import { Color, Quat, ScriptComponent, Script, Vec2, Vec3, Vec4 } from 'playcanv
 import { AssetElement } from '../asset';
 import { ComponentElement } from './component';
 import { ScriptElement } from './script';
-import { getEntity, parseBool, parseColor, parseComponents, parseNumber, parseQuat, parseVec2, parseVec3, parseVec4 } from '../utils';
+import { getEntity, parseBool, parseColor, parseComponents, parseNumber, parseQuat, parseVec2, parseVec3, parseVec4 } from '../parse';
 
 /**
  * Attributes on `pc-script` that never map to script attributes: the element's own API (derived
@@ -131,7 +131,7 @@ const colorConversion: Conversion = (rest, raw) => {
 };
 
 /**
- * The conversion prefixes recognised in script attribute values, mapped to the conversion each
+ * The conversion prefixes recognized in script attribute values, mapped to the conversion each
  * performs. These keys are the single source of truth for the prefix vocabulary: they drive both
  * the conversion in `convertAttributes` and the has-a-prefix test in `setScriptProperty`, so a
  * prefix added here is automatically known to both.
@@ -148,10 +148,10 @@ const CONVERSIONS = new Map<string, Conversion>([
 /**
  * Matches a value against the conversion prefixes. A prefix is the text before the first colon,
  * so a value whose remainder itself contains colons (`asset:a:b`) still resolves, and a value
- * with an unrecognised prefix (`https://...`) or no colon does not match.
+ * with an unrecognized prefix (`https://...`) or no colon does not match.
  * @param value - The value to inspect.
  * @returns The matching converter and the text after the prefix, or `null` if the value carries
- * no recognised prefix.
+ * no recognized prefix.
  */
 const matchConversion = (value: string) => {
     const index = value.indexOf(':');

package/src/components/script.ts

@@ -1,7 +1,7 @@
 import { Script } from 'playcanvas';
 
 import { AsyncElement } from '../async-element';
-import { parseBool } from '../utils';
+import { parseBool } from '../parse';
 
 /**
  * The ScriptElement interface provides properties and methods for manipulating
@@ -28,6 +28,13 @@ import { parseBool } from '../utils';
  *
  * The element becomes ready once its script instance has been created by the parent
  * `<pc-scripts>` element.
+ *
+ * @fires {CustomEvent} scriptattributeschange - Fired when the script's attributes change. The
+ * `detail` carries the new `attributes` object. Bubbles.
+ * @fires {CustomEvent} scriptenablechange - Fired when the script's enabled state changes. The
+ * `detail` carries the new `enabled` state. Bubbles.
+ * @fires {CustomEvent} scriptnamechange - Fired when the script is renamed on a live element. The
+ * `detail` carries `oldName` and `newName`. Bubbles.
  */
 class ScriptElement extends AsyncElement {
     private _attributes: Record<string, any> = {};
@@ -148,7 +155,7 @@ class ScriptElement extends AsyncElement {
         return ['attributes', 'enabled', 'name'];
     }
 
-    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
         switch (name) {
             case 'attributes':
                 if (newValue === null) {

package/src/components/scrollbar-component.ts

@@ -1,7 +1,7 @@
 import { ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL, ScrollbarComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { getEntity, parseEnum, parseNumber } from '../utils';
+import { getEntity, parseEnum, parseNumber } from '../parse';
 
 const orientations = new Map<'horizontal' | 'vertical', number>([
     ['horizontal', ORIENTATION_HORIZONTAL],
@@ -142,7 +142,7 @@ class ScrollbarComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
@@ -156,7 +156,7 @@ class ScrollbarComponentElement extends ComponentElement {
                 this.handleSize = parseNumber(newValue, 0.5, name);
                 break;
             case 'handle':
-                this.handle = newValue;
+                this.handle = newValue ?? '';
                 break;
         }
     }

package/src/components/scrollview-component.ts

@@ -1,7 +1,7 @@
 import { SCROLL_MODE_BOUNCE, SCROLL_MODE_CLAMP, SCROLL_MODE_INFINITE, SCROLLBAR_VISIBILITY_SHOW_ALWAYS, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED, ScrollViewComponent, Vec2 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { getEntity, parseBool, parseEnum, parseNumber, parseVec2 } from '../utils';
+import { getEntity, parseBool, parseEnum, parseNumber, parseVec2 } from '../parse';
 
 const scrollModes = new Map<'clamp' | 'bounce' | 'infinite', number>([
     ['clamp', SCROLL_MODE_CLAMP],
@@ -377,7 +377,7 @@ class ScrollViewComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
@@ -409,16 +409,16 @@ class ScrollViewComponentElement extends ComponentElement {
                 this.verticalScrollbarVisibility = parseEnum(newValue, visibilities, 'when-required', name);
                 break;
             case 'viewport':
-                this.viewport = newValue;
+                this.viewport = newValue ?? '';
                 break;
             case 'content':
-                this.content = newValue;
+                this.content = newValue ?? '';
                 break;
             case 'horizontal-scrollbar':
-                this.horizontalScrollbar = newValue;
+                this.horizontalScrollbar = newValue ?? '';
                 break;
             case 'vertical-scrollbar':
-                this.verticalScrollbar = newValue;
+                this.verticalScrollbar = newValue ?? '';
                 break;
         }
     }

package/src/components/sound-component.ts

@@ -1,7 +1,7 @@
 import { SoundComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseEnum, parseNumber } from '../utils';
+import { parseBool, parseEnum, parseNumber } from '../parse';
 
 /**
  * The SoundComponentElement interface provides properties and methods for manipulating
@@ -197,7 +197,7 @@ class SoundComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/sound-slot.ts

@@ -3,7 +3,7 @@ import { SoundSlot } from 'playcanvas';
 import { AssetElement } from '../asset';
 import { AsyncElement } from '../async-element';
 import { SoundComponentElement } from './sound-component';
-import { parseBool, parseNumber } from '../utils';
+import { parseBool, parseNumber } from '../parse';
 
 /**
  * The SoundSlotElement interface provides properties and methods for manipulating
@@ -29,13 +29,31 @@ class SoundSlotElement extends AsyncElement {
 
     private _volume: number = 1;
 
+    /**
+     * The `<pc-sounds>` this slot was added to, captured at connect time.
+     *
+     * `disconnectedCallback` cannot rediscover it: by the time the element is disconnected its
+     * `parentElement` is already `null`, so a lookup would both fail to find the component and
+     * emit a misleading "must be a direct child" warning for what is an ordinary removal.
+     */
+    private _soundElement: SoundComponentElement | null = null;
+
     /**
      * The sound slot.
      */
     soundSlot: SoundSlot | null = null;
 
     async connectedCallback() {
-        await this.soundElement?.ready();
+        const soundElement = this.soundElement;
+        await soundElement?.ready();
+
+        // The element may have been removed, or its parent torn down, while we were waiting. A
+        // <pc-app> disconnects before its children, so by the time we resume the component can
+        // already be gone - see the matching guard in disconnectedCallback below.
+        const component = soundElement?.component;
+        if (!this.isConnected || !component) {
+            return;
+        }
 
         const options = {
             autoPlay: this._autoPlay,
@@ -49,7 +67,8 @@ class SoundSlotElement extends AsyncElement {
             options.duration = this._duration;
         }
 
-        this.soundSlot = this.soundElement!.component!.addSlot(this._name, options);
+        this._soundElement = soundElement;
+        this.soundSlot = component.addSlot(this._name, options);
         this.asset = this._asset;
         if (this._autoPlay) {
             this.soundSlot!.play();
@@ -59,9 +78,12 @@ class SoundSlotElement extends AsyncElement {
     }
 
     disconnectedCallback() {
-        // The component is null if the parent <pc-sound> (or the whole <pc-app>) is being
-        // torn down — parents disconnect first and have already removed the component.
-        this.soundElement?.component?.removeSlot(this._name);
+        // Uses the cached parent rather than a fresh lookup, since parentElement is already null
+        // by now. The component itself is null if the parent <pc-sound> (or the whole <pc-app>) is
+        // being torn down — parents disconnect first and have already removed the component.
+        this._soundElement?.component?.removeSlot(this._name);
+        this._soundElement = null;
+        this.soundSlot = null;
     }
 
     protected get soundElement(): SoundComponentElement | null {
@@ -253,10 +275,10 @@ class SoundSlotElement extends AsyncElement {
         return ['asset', 'auto-play', 'duration', 'loop', 'name', 'overlap', 'pitch', 'start-time', 'volume'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         switch (name) {
             case 'asset':
-                this.asset = newValue;
+                this.asset = newValue ?? '';
                 break;
             case 'auto-play':
                 this.autoPlay = parseBool(newValue, false);
@@ -268,7 +290,7 @@ class SoundSlotElement extends AsyncElement {
                 this.loop = parseBool(newValue, false);
                 break;
             case 'name':
-                this.name = newValue;
+                this.name = newValue ?? '';
                 break;
             case 'overlap':
                 this.overlap = parseBool(newValue, false);