FAST Element属性值不更新求助：按官方指南操作仍无效

问题描述 #

按照FAST Element官方入门指南操作，即使直接复制示例代码，自定义元素的属性值仍无法更新。当前代码中，HTML里给<name-tag>设置了greeting="something"，预期<h3>显示something，但实际显示默认值default。使用esbuild进行打包、转译和本地服务。

相关代码 #

TypeScript代码

import { FASTElement, customElement, attr, html } from "@microsoft/fast-element";

const template = html`
    <div class="header">
        <h3>My name is: ${x => x.greeting}</h3>
    </div>

    <div class="name-tag-body">
        <slot>Default slot</slot>
    </div>
`;

@customElement({
    name: 'name-tag',
    template: template
})
export class NameTag extends FASTElement {
    @attr greeting: string = "default";

    greetingChanged() {
        console.log("greeting changed:", this.greeting);   
    }

    connectedCallback() {
        super.connectedCallback();
        console.log("connectedCallback");
    }
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <name-tag greeting="something"></name-tag>
    <!-- 注意：需引入打包后的JS文件 -->
    <script src="./dist/bundle.js"></script>
</body>
</html>

问题排查与解决 #

1. 修复语法错误
   原TypeScript代码末尾多了两个多余的}，这会导致代码无法正常编译，删除后才能保证自定义元素正确注册。

2. 确保HTML引入打包后的脚本
   你的HTML文件中没有引入打包生成的JS文件，浏览器无法加载自定义元素的定义，自然无法识别greeting属性。添加<script src="./dist/bundle.js"></script>（路径根据你的打包输出目录调整）。

3. 配置esbuild支持装饰器
   FAST Element依赖TypeScript装饰器，需要确保esbuild正确处理：

   • 在项目根目录创建tsconfig.json，开启装饰器支持：

     {
         "compilerOptions": {
             "experimentalDecorators": true,
             "emitDecoratorMetadata": true,
             "target": "ES2020",
             "module": "ESNext"
         }
     }
     

   • 执行esbuild时指定tsconfig：

     esbuild src/index.ts --bundle --outfile=dist/bundle.js --tsconfig=tsconfig.json --serve=8000
     

4. 验证属性变更逻辑
   修复后，greetingChanged生命周期函数应该会在元素挂载时打印出greeting changed: something，同时<h3>会正确显示My name is: something。

内容的提问来源于stack exchange，提问作者decipher