Support styling with :part()

.changeset/lucky-llamas-mix.md

@@ -0,0 +1,5 @@
+---
+'@responsive-image/wc': minor
+---
+
+Support styling with :part(img)

apps/docs/src/frameworks/wc.md

@@ -38,6 +38,16 @@ import '@responsive-image/wc';
 > [!Important]
 > As the `src` input is an `ImageData` object, you cannot pass this as an HTML _attribute_. Web components only support string based attributes. So make sure to set it as a _property_ using JavaScript. In case of [Lit](https://lit.dev/), you would use the dot prefix notation for [property expressions](https://lit.dev/docs/templates/expressions/#property-expressions): ``html`<responsive-image .src=${image} ></responsive-image>\` ``.
 
+### Styling
+
+To style the `<img>` element which is within the web component's Shadow DOM, you can use the [::part(img) selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part):
+
+```css
+responsive-image::part(img) {
+  box-shadow: 3px 3px 5px gray;
+}
+```
+
 ## Local images
 
 To process [local images](../usage/local-images.md) you will need to setup one of the [build plugins](../build/index.md) depending on your app's setup.

packages/wc/src/responsive-image.ts

@@ -205,6 +205,7 @@ export class ResponsiveImage extends LitElement {
             />`,
         )}
         <img
+          part="img"
           width=${ifDefined(this.imgWidth)}
           height=${ifDefined(this.imgHeight)}
           class=${classMap(classes)}

packages/wc/test/responsive-image.test.ts

@@ -78,6 +78,17 @@ describe('ResponsiveImage', () => {
         'some',
       );
     });
+
+    test('it exposes img with part', async () => {
+      const el = await fixture<ResponsiveImage>(
+        html`<responsive-image .src=${defaultImageData} />`,
+      );
+
+      expect(el.shadowRoot?.querySelector('img')).toHaveAttribute(
+        'part',
+        'img',
+      );
+    });
   });
 
   describe('responsive layout', () => {