From 8691a57e5acdc5c6ea09973d25b4fbfbeec21550 Mon Sep 17 00:00:00 2001
From: ochairo <19258508+ochairo@users.noreply.github.com>
Date: Fri, 29 Mar 2024 21:37:39 +0900
Subject: [PATCH] Update README.md

---
 README.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/README.md b/README.md
index e5b0611..2f5e0ea 100644
--- a/README.md
+++ b/README.md
@@ -134,3 +134,30 @@ You have multiple options for development.
 - [Naming conventions](docs/wiki/development-rules/naming_conventions.md)
 - [Commit rules](docs/wiki/development-rules/commit_rules.md)
 - [Branch strategy](docs/wiki/development-rules/branch_strategy.md)
+
+### Samples
+
+#### Component
+
+How to write components in vanillatte.
+
+```ts
+import style from "./sample.component.css";
+import template from "./sample.component.html";
+
+class SampleComponent extends BaseComponent {
+  constructor() {
+    super();
+    this._shadowRoot.innerHTML = `<style>${style}</style>${template}`;
+  }
+
+  onInit() {... }
+
+  onDestroy() {... }
+
+}
+
+customElements.define("sample-component", SampleComponent);
+export default SampleComponent;
+```
+