From a47c8bc7bb33bc6c685d882a7f922cd39914a874 Mon Sep 17 00:00:00 2001 From: Richard Walker Date: Mon, 23 Sep 2024 13:03:49 +1200 Subject: [PATCH 1/2] fix: sharpen up shadow dom usage assertion --- lib/podlet.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/podlet.js b/lib/podlet.js index da21e79..f99c37f 100644 --- a/lib/podlet.js +++ b/lib/podlet.js @@ -841,10 +841,12 @@ export default class PodiumPodlet { * ``` */ wrapWithShadowDOM(data) { - assert.ok( - customElementRegex.test(this.name), - 'When using the constructor argument "useShadowDOM", podlet.name must conform to custom element naming conventions: https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names', - ); + if (!this.#useShadowDOM) { + assert.ok( + customElementRegex.test(this.name), + `When using the constructor argument "useShadowDOM" or the method podlet.wrapWithShadowDOM, podlet.name must conform to custom element naming conventions. The name "${this.name}" does not comply. See https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names for more information.`, + ); + } const styles = this.cssRoute .filter((css) => css.scope === 'shadow-dom') From 7eeaeb725f9b0e8f85f282ba8a4bb5d876074e6e Mon Sep 17 00:00:00 2001 From: Richard Walker Date: Mon, 30 Sep 2024 08:53:15 +1300 Subject: [PATCH 2/2] docs: improve naming docs --- README.md | 5 ++++- lib/podlet.js | 10 ++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 19ba560..1b1c9f3 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,9 @@ const podlet = new Podlet(options); #### name -The name the podlet identifies itself by. This value must be in camelCase. +The name the podlet identifies itself by. This value can contain upper and lower case letters, numbers, the - character and the \_ character. No spaces. +When shadow DOM is used, either via the `useShadowDOM` constructor option or via the `wrapWithShadowDOM` method, the name must comply with custom element naming rules. +See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names) for more information. _Example:_ @@ -268,6 +270,7 @@ const podlet = new Podlet({ ..., useShadowDOM: true }); ``` Please note the following caveats when using this feature: + 1. You must name your podlet following custom element naming conventions as explained here: https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names 2. In order to style your content, you will need to include your CSS inside the shadow DOM wrapper. You can do this using one of the following 2 options: diff --git a/lib/podlet.js b/lib/podlet.js index f99c37f..04dc673 100644 --- a/lib/podlet.js +++ b/lib/podlet.js @@ -841,12 +841,10 @@ export default class PodiumPodlet { * ``` */ wrapWithShadowDOM(data) { - if (!this.#useShadowDOM) { - assert.ok( - customElementRegex.test(this.name), - `When using the constructor argument "useShadowDOM" or the method podlet.wrapWithShadowDOM, podlet.name must conform to custom element naming conventions. The name "${this.name}" does not comply. See https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names for more information.`, - ); - } + assert.ok( + customElementRegex.test(this.name), + `When using the constructor argument "useShadowDOM" or the method podlet.wrapWithShadowDOM, podlet.name must conform to custom element naming conventions. The name "${this.name}" does not comply. See https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#valid_custom_element_names for more information.`, + ); const styles = this.cssRoute .filter((css) => css.scope === 'shadow-dom')