fix(lit): add css part pseudo-element (#295)

Co-authored-by: Matt Kane <[email protected]>
ascorbic · Jul 13, 2023 · 86f9ebc · 86f9ebc
1 parent 1917632
commit 86f9ebc
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git 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
@@ -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
@@ -61,6 +61,7 @@ export class UnpicImg
 
     return html`
       <img
+        part="image"
         src="${transformedProps.src}"
         alt="${transformedProps.alt}"
         width="${transformedProps.width}"