Angular中ng-content无法显示带host属性组件的问题排查

我正在排查Angular里ng-content无法显示带host属性组件的问题。检查生成的HTML DOM时，宿主标签上确实存在该属性，但ng-content对应的容器里没有子元素。

@编辑说明：
在@Naren Murali的回答后补充：我的需求是把position-middle作为position-panel的子组件使用时，不用手动传递middle-region属性，因为position-middle的宿主标签本身就带有这个属性。

position-panel.component #

@Component({
    selector: "position-panel",
    standalone: true,
    imports: [],
    template: `
        <div class="position-panel-component">
            <div class="start-content">
                <ng-content select="[start-region]"></ng-content>
            </div>
            <div class="middle-content">
                <ng-content select="[middle-region]"></ng-content>
            </div>
            <div class="end-content">
                <ng-content select="[end-region]"></ng-content>
            </div>
        </div>
    `,
    styles: `
        .position-panel-component {
            display: flex;
            height: 100%;
            justify-content: space-between;
            width: 100%;

            > .start-content,
            > .middle-content,
            > .end-content {
                display: flex;
                height: 100%;
                justify-content: space-between;
                width: 100%;
            }

            > .start-content {
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
            }

            > .middle-content {
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }

            > .end-content {
                flex-direction: row;
                justify-content: end;
                align-items: center;
            }

        }
    `
})
export class PositionPanelComponent {}

position-middle.component #

@Component({
    selector: "position-middle",
    standalone: true,
    imports: [],
    template: `<ng-content></ng-content>`,
    host: {
        "middle-region": "",
    },
})
export class PositionMiddleComponent {}

home.component #

@Component({
    selector: "home",
    standalone: true,
    imports: [],
    template: `
        <div class="header-bar">
            <position-panel>
                <ng-container start-region> <!-- 此部分可正常显示 -->
                    <button>Start 1</button>
                    <button>Start 2</button>
                    <button>Start 3</button>
                </ng-container>
                <position-middle> <!-- 此部分无法显示！DOM中position-panel的<div class="middle-content">无子元素 -->
                    <button>Middle 1</button>
                    <button>Middle 2</button>
                    <button>Middle 3</button>
                </position-middle>
                <div end-region> <!-- 此部分可正常显示 -->
                    <button>End 1</button>
                    <button>End 2</button>
                    <button>End 3</button>
                </div>
            </position-panel>


            <!-- DOM中生成的position-middle带有middle-region属性 -->
            <position-middle> 
                 <button>Middle 1</button>
                <button>Middle 2</button>
                <button>Middle 3</button>
            </position-middle>

        </div>
    `
})
export class HomeComponent {}

已尝试的无效方案 #

我试过几种给position-middle宿主标签添加属性的方式，都没用：

host: {
    "[attr.middle-region]": "", // 报错：AssertionError: Unsupported reification of ir.Expression kind: EmptyExpr
},
hostDirectives: [
    PositionMiddleDirective // DOM中未生成middle-region属性       
]

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