Javascript lit元素是否可以跟踪其范围外的变量

在我的lit元素中，我正在基于外部变量渲染某些内容。当变量发生变化时，我如何知道更新

import { LitElement, html } from 'lit-element';
import './element01.js';

class Layout extends LitElement {
    createRenderRoot(){ return this; }

    static get properties() {
      return {
        settings: { Object }
      };
    }

    constructor() {
      super();
    }

    render() {
      return html`
        ${(settings.foo === 'bar')? html`<my-element01 />` : null}
      `;
    }
}
customElements.define('my-layout', Layout);

从'lit element'导入{LitElement，html}；
导入“/element01.js”；
类布局扩展了LitElement{
createRenderRoot（）{返回此；}
静态获取属性（）{
返回{
设置：{Object}
};
}
构造函数（）{
超级（）；
}
render（）{
返回html`
${（settings.foo=='bar'）？html``:null}
`;
}
}
自定义元素。定义（'my-layout'，layout）；

---

正在外部修改设置对象，此元素如何知道要更新？我没有使用任何其他框架。

这里是我试图说明的一个示例<代码>设置属性在litElement外部更改，并在litElement中生效

index.html

  ...
<my-layout></my-layout>
<br>
<button onClick="_buttonClicked()" >change the settings value</button>
<script>
  document.querySelector('my-layout').settings={foo:"bar"};
   function _buttonClicked (e) { 
     document.querySelector('my-layout').settings = {foo:"baz"};    
 }
</script>

。。。


更改设置值
document.querySelector（'my-layout'）。设置={foo:'bar}；
函数_按钮点击（e）{
document.querySelector（'my-layout'）。settings={foo:“baz”}；
}

我的布局：

import { LitElement, html } from 'lit-element';
//import './element01.js';

class Layout extends LitElement {
    createRenderRoot(){ return this; }

    static get properties() {
      return {
        settings: { Object }
      };
    }

    constructor() {
      super();

    }

    render() {
      return html`
        ${this.settings.foo === 'bar'? html`<span> element01 will be rendered</span>` : null}
      `;
    }
}
customElements.define('my-layout', Layout)

从'lit element'导入{LitElement，html}；
//导入“/element01.js”；
类布局扩展了LitElement{
createRenderRoot（）{返回此；}
静态获取属性（）{
返回{
设置：{Object}
};
}
构造函数（）{
超级（）；
}
render（）{
返回html`
${this.settings.foo==='bar'？html`element01将被呈现为`:null}
`;
}
}
自定义元素。定义（'my-layout'，layout）

• 我做了一些语法修正

---

这里有一个我试图说明的例子<代码>设置属性在litElement外部更改，并在litElement中生效
index.html

  ...
<my-layout></my-layout>
<br>
<button onClick="_buttonClicked()" >change the settings value</button>
<script>
  document.querySelector('my-layout').settings={foo:"bar"};
   function _buttonClicked (e) { 
     document.querySelector('my-layout').settings = {foo:"baz"};    
 }
</script>

。。。


更改设置值
document.querySelector（'my-layout'）。设置={foo:'bar}；
函数_按钮点击（e）{
document.querySelector（'my-layout'）。settings={foo:“baz”}；
}

我的布局：

import { LitElement, html } from 'lit-element';
//import './element01.js';

class Layout extends LitElement {
    createRenderRoot(){ return this; }

    static get properties() {
      return {
        settings: { Object }
      };
    }

    constructor() {
      super();

    }

    render() {
      return html`
        ${this.settings.foo === 'bar'? html`<span> element01 will be rendered</span>` : null}
      `;
    }
}
customElements.define('my-layout', Layout)

从'lit element'导入{LitElement，html}；
//导入“/element01.js”；
类布局扩展了LitElement{
createRenderRoot（）{返回此；}
静态获取属性（）{
返回{
设置：{Object}
};
}
构造函数（）{
超级（）；
}
render（）{
返回html`
${this.settings.foo==='bar'？html`element01将被呈现为`:null}
`;
}
}
自定义元素。定义（'my-layout'，layout）

• 我做了一些语法修正

---

index.html文件应始终具有

<my-app></my-app>

在my app元素中，您将能够使用litElement的所有功能，例如

 class MyApp extends LitElement {

      static get properties() {
        return {
          prop: {type: Object},
        };
      }

      render() {
        return html`
        <my-element .prop="${this.prop}"</my-element>
        <my-server  .prop="${this.prop}"</my-server>
        <button @onClick='${(e) => this.prop += 1}' >change the settings value</button>
        `;
      }
    }

类MyApp扩展了LitElement{
静态获取属性（）{
返回{
属性：{type:Object}，
};
}
render（）{
返回html`
index.html文件应始终具有

<my-app></my-app>



在my app元素中，您将能够使用litElement的所有功能，例如

 class MyApp extends LitElement {

      static get properties() {
        return {
          prop: {type: Object},
        };
      }

      render() {
        return html`
        <my-element .prop="${this.prop}"</my-element>
        <my-server  .prop="${this.prop}"</my-server>
        <button @onClick='${(e) => this.prop += 1}' >change the settings value</button>
        `;
      }
    }

类MyApp扩展了LitElement{
静态获取属性（）{
返回{
属性：{type:Object}，
};
}
render（）{
返回html`
有趣。因此，与其说litElement查看外部对象，不如说它被告知。因此，它自己的对象已被修改，并且知道要更新。有趣。因此，与其说litElement查看外部对象，不如说它被告知。因此，它自己的对象已被修改，并且知道要更新。