From f711b340af5adf66de9c9d1ea20e24ec712d1474 Mon Sep 17 00:00:00 2001 From: Jesse Jurman Date: Mon, 28 Jul 2025 02:24:56 -0400 Subject: [PATCH 1/7] initial implementation of web component interface --- bundle-example/index.html | 48 ++++++++++--------- example/callout-alert.html | 58 +++++++++++----------- example/score-table.html | 44 +++++++++-------- example/task-list.html | 34 ++++++------- shadowroot-injector.js | 98 +++++++++++++++++--------------------- 5 files changed, 139 insertions(+), 143 deletions(-) diff --git a/bundle-example/index.html b/bundle-example/index.html index 3a9aeb1..946eca8 100644 --- a/bundle-example/index.html +++ b/bundle-example/index.html @@ -1,32 +1,34 @@ - +
+ + +
+ + Pro Tip! diff --git a/example/callout-alert.html b/example/callout-alert.html index 7a937e3..d4bad83 100644 --- a/example/callout-alert.html +++ b/example/callout-alert.html @@ -1,31 +1,33 @@ - - - + + + + +

ShadowRoot Injector lets you repeat templates easily, no JS required!

diff --git a/example/score-table.html b/example/score-table.html index a998260..d6fefa6 100644 --- a/example/score-table.html +++ b/example/score-table.html @@ -1,26 +1,28 @@ - + - + diff --git a/example/task-list.html b/example/task-list.html index 729ba22..530167b 100644 --- a/example/task-list.html +++ b/example/task-list.html @@ -1,20 +1,22 @@ - + - + + + + + + + + +
+ The following is a list of elements you can attach a shadow root to: + <article>, <aside>, <blockquote>, <body>, + <div>, <span>, and more! + + + + Elements you can attach a shadow to + + +
diff --git a/playwright.config.js b/playwright.config.js index b54dff7..cb4d293 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -23,17 +23,10 @@ module.exports = defineConfig({ /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: 'html', - /* Run your local dev server before starting the tests */ - webServer: { - command: 'npx serve bundle-example/dist -l 5173', - port: 5173, - reuseExistingServer: !process.env.CI, - }, - /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: 'http://localhost:5173', + // baseURL: 'http://localhost:5173', // Capture screenshot after each test failure. screenshot: 'only-on-failure', diff --git a/playwright/blockquote.spec.js b/playwright/blockquote.spec.js new file mode 100644 index 0000000..7c0871c --- /dev/null +++ b/playwright/blockquote.spec.js @@ -0,0 +1,16 @@ +// @ts-check +const { test, expect } = require('@playwright/test'); +const path = require('path'); + +test.describe('ShadowRoot Injector Tests', () => { + test('blockquote example renders and behaves as expected', async ({ page }) => { + // Construct the absolute file path and use the file:// protocol + const filePath = path.resolve(__dirname, '../example/blockquote.html'); + await page.goto(`file://${filePath}`); + + // verify first blockquote exists and has shadow root elements + const blockquote = page.locator('blockquote').first(); + await expect(blockquote).toBeVisible(); + await expect(blockquote).toHaveText(/Citation:/); + }); +}); From 171390280e899842fc63c036e53739b8455d7b96 Mon Sep 17 00:00:00 2001 From: Jesse Jurman Date: Thu, 31 Jul 2025 01:37:05 -0400 Subject: [PATCH 5/7] update README --- README.md | 186 ++++++++++++++++++++++++------------------------------ 1 file changed, 84 insertions(+), 102 deletions(-) diff --git a/README.md b/README.md index 9d26b51..98f0053 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,9 @@ _🪡 declaratively define shadowroots to repeat in HTML templates_ ## What is ShadowRoot Injector? -ShadowRoot Injector lets you define templates for custom elements using HTML. When those elements appear in the DOM, the -library will automatically insert the template you defined into the element. You can then, optionally, upgrade the -element using native web-component definitions (either inline in a script tag, or imported as a separate component -definition). +ShadowRoot Injector lets you define templates for elements using HTML. When those elements appear in the DOM, the +library will automatically insert a template into the element. You can then, optionally, upgrade the element using +native web-component definitions (either inline in a script tag, or imported as a separate component definition). ### Example @@ -16,50 +15,52 @@ The example below shows a markdown callout. You can see a running example live o ```html - + - +
+ + +
+ - -

ShadowRoot Injector lets you repeat templates easily, no JS required!

+ +

ShadowRoot Injector lets you repeat templates easily, no JS required!

- - Pro Tip! - If you want to add more behavior, you can upgrade custom-elements into web-components any time with JavaScript! - + + Pro Tip! + If you want to add more behavior, you can upgrade custom-elements into web-components any time with JavaScript! + -

You can check out the repository on Github.

+

You can check out the repository on Github.

- - PRs Welcome! - You can make git issues or pull requests for any issues you find. - + + PRs Welcome! + You can make git issues or pull requests for any issues you find. + ``` ### Why? @@ -71,75 +72,56 @@ associated with building javascript class definitions. ## How to use -You can include ShadowRoot Injector by using a CDN of your choice. In the script tag you can include `sr-autostart` to -automatically kick off the mutation observers that look for and inject shadow root templates. +You can include ShadowRoot Injector by using a CDN of your choice. ```html - + ``` You can also use the minified version by pointing to the minified asset ```html - + ``` ### HTML API -The HTML API is completely driven by attributes on the `