From 86f9ebce70bbf69b8ebadffd5c57d20cc999c9a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Ko=C5=82odziejczyk?=
 <eshlox@users.noreply.github.com>
Date: Thu, 13 Jul 2023 12:03:22 +0200
Subject: [PATCH] fix(lit): add css part pseudo-element (#295)

Co-authored-by: Matt Kane <m@mk.gg>
---
 docs/src/content/img/lit.md   | 11 +++++++++++
 packages/lit/README.md        | 11 +++++++++++
 packages/lit/src/unpic-img.ts |  1 +
 3 files changed, 23 insertions(+)

diff --git a/docs/src/content/img/lit.md b/docs/src/content/img/lit.md
index 9270c790..a0a6ca4b 100644
--- a/docs/src/content/img/lit.md
+++ b/docs/src/content/img/lit.md
@@ -31,3 +31,14 @@ You can then use the component in your HTML:
   alt="A lovely bath"
 ></unpic-img>
 ```
+
+## Styling
+
+If you need to style the `img` element, you can use the
+[`::part` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part):
+
+```css
+unpic-img::part(image) {
+  border-radius: 4px;
+}
+```
diff --git a/packages/lit/README.md b/packages/lit/README.md
index fb964b6b..b1a64522 100644
--- a/packages/lit/README.md
+++ b/packages/lit/README.md
@@ -45,4 +45,15 @@ You can then use the component in your HTML:
 ></unpic-img>
 ```
 
+## Styling
+
+If you need to style the `img` element, you can use the
+[`::part` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part):
+
+```css
+unpic-img::part(image) {
+  border-radius: 4px;
+}
+```
+
 For the supported props, see [the docs](https://unpic.pics/img/lit).
diff --git a/packages/lit/src/unpic-img.ts b/packages/lit/src/unpic-img.ts
index 97e2c875..bd3b3246 100644
--- a/packages/lit/src/unpic-img.ts
+++ b/packages/lit/src/unpic-img.ts
@@ -61,6 +61,7 @@ export class UnpicImg
 
     return html`
       <img
+        part="image"
         src="${transformedProps.src}"
         alt="${transformedProps.alt}"
         width="${transformedProps.width}"