update

src/core.js

@@ -4,17 +4,72 @@
  * @date 2023/03/03 11:21:44
  */
 
-export function css(str) {}
-
-const foo = css`
-  .foo {
-    color: red;
-    color: green;
-    background: green;
-
-    .bar {
-      display: flex;
+export function css(strs, ...args) {
+  let output = ''
+  let tmp = Array.from(strs)
+  while (tmp.length) {
+    output += tmp.shift() + (args.shift() || '')
   }
+
+  if (args.length) {
+    output += args.join(' ')
   }
-`
-const bar = html` <h1></h1> `
+  return output
+}
+
+export function html(strs, ...args) {
+  let output = ''
+  let tmp = Array.from(strs)
+  // console.log(tmp, args)
+
+  while (tmp.length) {
+    let _ = args.shift()
+    switch (typeof _) {
+      case 'function':
+        console.log([_], _.name)
+        _ = _.name
+        break
+      case 'object':
+        if (Array.isArray(_)) {
+          _ = _.join('')
+        }
+        break
+    }
+    output += tmp.shift() + (_ === void 0 ? '' : _)
+  }
+
+  if (args.length) {
+    output += args.join(' ')
+  }
+  return output
+}
+
+function getTemplate(html) {
+  let template = document.createElement('template')
+  template.innerHTML = html
+  return template.content.cloneNode(true)
+}
+
+export class Compoent extends HTMLElement {
+  static get observedAttributes() {
+    console.log(this.properties)
+    return []
+  }
+
+  constructor() {
+    super()
+  }
+
+  render() {
+    return ''
+  }
+
+  connectedCallback() {
+    Object.defineProperty(this, 'root', {
+      value: this.attachShadow({ mode: 'open' }),
+      enumerable: false
+    })
+
+    this.root.appendChild(getTemplate(this.render()))
+  }
+}