From 8097769154d6b8413252825c245f8959a7faa507 Mon Sep 17 00:00:00 2001
From: dntzhang <dntzhang@qq.com>
Date: Mon, 19 Nov 2018 12:47:40 +0800
Subject: [PATCH] add omi-30-seconds

---
 packages/omi-30-seconds/README.md | 59 +++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 packages/omi-30-seconds/README.md

diff --git a/packages/omi-30-seconds/README.md b/packages/omi-30-seconds/README.md
new file mode 100644
index 000000000..5e9a35cd8
--- /dev/null
+++ b/packages/omi-30-seconds/README.md
@@ -0,0 +1,59 @@
+## Omi 30 Seconds
+
+Curated collection of useful Omi snippets that you can understand in 30 seconds or less.
+
+## Overview of the Readme
+
+- Share css between parent and child nodes[#share-css-between-parent-and-child-nodes]
+
+
+## Share css between parent and child nodes
+
+```js
+import { define, WeElement, render, getHost } from 'omi'
+
+define('my-ele', class extends WeElement {
+  install() {
+    this.css = getHost().css
+  }
+
+  render() {
+    return props.children[0]
+  }
+})
+
+define('my-parent-ele', class extends WeElement {
+  css() {
+    return `div { color: red; }`
+  }
+
+  render() {
+    return (
+      <div>
+        <my-ele>
+          <div>content</div>
+        </my-ele>
+      </div>
+    )
+  }
+})
+
+render(<my-parent-ele />, 'body')
+```
+
+Share css by `getHost` method. You can also recombine with the parent node's css and custom css.
+
+```js
+define('my-ele', class extends WeElement {
+  
+  css() {
+    return getHost().css() + `
+      font-size: 34px;
+    `
+  }
+
+  render() {
+    return props.children[0]
+  }
+})
+```