es标记模版字符串es模版字符串使用，类似于vue template标记转成render函数 1.第一步给元素添加ren

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="id">
        test
    </div>
</body>

<script type="module">

    let tt = document.getElementById('id')
    //let content = document.getElementById('content')

    //使用原型模式创建一个方法
    HTMLElement.prototype.render =  function (strs, ...values){
        console.log("styles==", strs, values, this)
        //let rawStyle = this.getAttribute('style')
        this.innerHTML = generateString(strs,values)
        console.log('styles==', this.style)

       
        return this
    }

    //解析模版字符串
    function generateString(strTmpl, ...values) {
        return strTmpl.reduce((pre, current, i) => {
            console.log(`pre==${pre},current=${current},index=${i}=`,values)
           
            // debugger;
            //结束标志
            if (current == null) {
                return pre        
            }
            let res= pre + ( values[0][i-1])+"" + current
            console.log("res===",res)
            return res

        })

    }
    let color='grey'
    let styles = `color:${color};`
    //使用模版字符串
    tt.render`<div style=${styles}>当前颜色:${color}</div>`

</script>

</html>