update
parent
ed54057b5f
commit
539a79c288
79
src/core.js
79
src/core.js
|
@ -4,17 +4,72 @@
|
||||||
* @date 2023/03/03 11:21:44
|
* @date 2023/03/03 11:21:44
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function css(str) {}
|
export function css(strs, ...args) {
|
||||||
|
let output = ''
|
||||||
const foo = css`
|
let tmp = Array.from(strs)
|
||||||
.foo {
|
while (tmp.length) {
|
||||||
color: red;
|
output += tmp.shift() + (args.shift() || '')
|
||||||
color: green;
|
|
||||||
background: green;
|
|
||||||
|
|
||||||
.bar {
|
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (args.length) {
|
||||||
|
output += args.join(' ')
|
||||||
}
|
}
|
||||||
`
|
return output
|
||||||
const bar = html` <h1></h1> `
|
}
|
||||||
|
|
||||||
|
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()))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Reference in New Issue