From 91cdaad460d1f234d24841da882c93e0c2e6de44 Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
Date: Wed, 6 Mar 2024 10:58:37 +0100
Subject: [PATCH] Add example and more info to readme

---
 readme.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/readme.md b/readme.md
index a9abad4..26df13b 100644
--- a/readme.md
+++ b/readme.md
@@ -3,6 +3,19 @@
 A simple proof-of-concept implementation of a mechanism to pull outside styles
 into a Shadow-DOM.
 
+```html
+<style>
+	p { color: red }
+</style>
+
+<my-component>
+	<template shadowrootmode="open">
+		<adopt-styles adopt="all"></adopt-styles>
+		<p>This paragraph is red</p>
+	</template>
+</my-component>
+```
+
 ## Rationale
 
 This is primarily meant as a simple proof-of-concept to show how this mechanism
@@ -14,6 +27,18 @@ The aim of this project is not to provide a full solution to the problem, but to
 showcase how one possible solution could work and to allow playing around with
 the concept in real-world projects.
 
+## Usage
+
+Putting the `<adopt-styles>` node inside a shadow root will search the document
+for style sheets and adopt them into the shadow root. Changes in the document's
+head that appear related to styles will trigger an update of the adopted styles.
+
+Adding the `layer=` attribute to the `<adopt-styles>` node will wrap the adopted
+rules in a layer of the given name.
+
+(Not yet Implemented) Setting the `adopt=` attribute to a value other than
+`"all"` will only adopt styles from the CSS layer of the given name.
+
 ## Notes
 
 Due to this being a relatively "simple" javascript implementation, outside