Javascript 是否可以将自定义属性/属性注入本机web组件？_Javascript_Html_Native Web Component

Javascript 是否可以将自定义属性/属性注入本机web组件？

javascript html

Javascript 是否可以将自定义属性/属性注入本机web组件？,javascript,html,native-web-component,Javascript,Html,Native Web Component,我正在学习web组件（本机和框架）。是否可以像我在Vue.js中所做的那样将属性注入本机组件这是my-component.js： const templateComponent = document.createElement('template'); templateComponent.innerHTML = `<div>{{ test }}</div>`; class MyComponent extends HTMLElement { connected

我正在学习web组件（本机和框架）。是否可以像我在Vue.js中所做的那样将属性注入本机组件

这是my-component.js：

const templateComponent = document.createElement('template');
templateComponent.innerHTML = `<div>{{ test }}</div>`;

class MyComponent extends HTMLElement {

    connectedCallback() {
        this._container = this.querySelector("DIV");
    }

}

window.customElements.define("my-component", MyComponent);

const templateComponent=document.createElement（'template'）；
templateComponent.innerHTML=`{{test}}}`；
类MyComponent扩展了HtmleElement{
connectedCallback（）{
this._container=this.querySelector（“DIV”）；
}
}
定义（“我的组件”，MyComponent）；

这是index.html：

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

<my-component test="Does this work?"></my-component>


<script src="my-component.js"></script>

</body>
</html>


文件

是和否

没有内置的模板。但这并不意味着你做不到

函数渲染（el）{
el.shadowRoot.innerHTML=`${el.\u test}`；
}
类MyComponent扩展了HtmleElement{
静态get ObservedAttribute（）{
返回[‘测试’]；
}
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）；
}
attributeChangedCallback（属性名称、旧值、新值）{
if（oldVal！==newVal）{
这个[`{attrName}`]=newVal；
渲染（此）；
}
}
}
定义（“我的组件”，MyComponent）

我还可以将函数（也可以作为字符串）传递给组件吗？请参阅我的扩展响应。你能提供更多关于你想用这个函数做什么的细节吗？扩展的响应对于我想做的是绝对合适的。谢谢：）有没有办法防止在背对背设置两个属性时两次调用渲染（此）
。请参阅我的更新以了解“去盎司”功能的一种方法。