diff --git a/packages/mux-player/src/html.ts b/packages/mux-player/src/html.ts
index d91118dae..9c94b80ff 100644
--- a/packages/mux-player/src/html.ts
+++ b/packages/mux-player/src/html.ts
@@ -74,6 +74,19 @@ export function processPropertyIdentity(part: Part, value: unknown): boolean {
return true;
}
+export function processElementAttribute(part: Part, value: unknown): boolean {
+ // This allows us to set the media-theme template property directly.
+ if (part instanceof AttrPart && value instanceof Element) {
+ const element = part.element as any;
+ if (element[part.attributeName] !== value) {
+ part.element.removeAttributeNS(part.attributeNamespace, part.attributeName);
+ element[part.attributeName] = value;
+ }
+ return true;
+ }
+ return false;
+}
+
export function processBooleanAttribute(part: Part, value: unknown): boolean {
if (
typeof value === 'boolean' &&
@@ -100,7 +113,8 @@ export function processBooleanNode(part: Part, value: unknown): boolean {
}
export function processPart(part: Part, value: unknown): void {
- processBooleanAttribute(part, value) ||
+ processElementAttribute(part, value) ||
+ processBooleanAttribute(part, value) ||
processEvent(part, value) ||
processBooleanNode(part, value) ||
processSubTemplate(part, value) ||
diff --git a/packages/mux-player/src/template.ts b/packages/mux-player/src/template.ts
index 9c8c2e6ab..331cf901f 100644
--- a/packages/mux-player/src/template.ts
+++ b/packages/mux-player/src/template.ts
@@ -21,7 +21,6 @@ export const template = (props: MuxTemplateProps) => html`
- ${muxTemplate.content.cloneNode(true)}
${content(props)}
`;
@@ -50,7 +49,7 @@ const getHotKeys = (props: MuxTemplateProps) => {
export const content = (props: MuxTemplateProps) => html`
template render', () => {
assert.equal(
normalizeAttributes(minify(div.innerHTML)),
normalizeAttributes(
- ``
+ ``
)
);
});
@@ -36,7 +36,7 @@ describe(' template render', () => {
assert.equal(
normalizeAttributes(minify(div.innerHTML)),
normalizeAttributes(
- ``
+ ``
)
);
});
@@ -54,7 +54,7 @@ describe(' template render', () => {
assert.equal(
normalizeAttributes(minify(div.innerHTML)),
normalizeAttributes(
- ``
+ ``
)
);
});
@@ -76,7 +76,7 @@ describe(' template render', () => {
assert.equal(
normalizeAttributes(minify(div.innerHTML)),
normalizeAttributes(
- `Errr
`
+ `Errr
`
)
);
});