[Question] No component found error when set key attribute in sub component

I am new to Marko, and I found a tricky error when I try to layout the html page in sections.

src/component/app-sections/index.marko

<div class="panel-body" style="background-color: #eee;">
      <form class="form-horizontal" key="anything" role="form">
         <div class="form-group" for(section in data.sections)>
          <label class=['col-md-3', 'control-label'] style="text-align: left;">
            ${section.label} <if(section.requiredField)><span.field_req_designator>*</span></if>
          </label>
          <div class='col-md-9'>
            <include(section)/>
          </div>
      </form>
</div>

When I add “key” attribute like this <form class="form-horizontal" key="anything" role="form">, it will report such an error below. If I removed the key, everything compiles fine.

[marko/hot-reload] Template successfully reloaded: /Users/dofu/git/epnportal/src/components/app-sections/index.marko.js
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Async fragment failed. Exception: Error: No component found
    at Error (native)
    at getCurrentComponent (/Users/dofu/git/epnportal/node_modules/marko/components/taglib/helpers/getCurrentComponent.js:13:15)
    at Object.render (/Users/dofu/git/epnportal/src/components/app-sections/index.marko.js:20:21)
    at hotReloadProxy (/Users/dofu/git/epnportal/node_modules/marko/hot-reload/index.js:82:31)
    at Object.render (/Users/dofu/git/epnportal/src/components/app/index.marko.js:62:3)
    at hotReloadProxy (/Users/dofu/git/epnportal/node_modules/marko/hot-reload/index.js:82:31)

The rest pieces of code: ~/src/component/app/index.marko

<div>
  <app-sections>
    <@section label='Advertiser' requiredField=true>
      <app-dropbox name='advertiser' options=dropboxAdvertiser />
    </@section>
</div>

~/src/component/app-sections/marko-tag.json

{
  "@sections <section>[]": {
    "@label": "string",
    "@requiredField": "boolean",
    "@*": "string"
  }
}

I am really excited to see Marko v4 coming out with many new features, bravo!

[patrick-steele-idem]

The key attribute can only be used within the context of a component as it stands now. We should probably make this more clear in the docs with updated text:

The key attribute can be applied to both HTML elements and custom tags for UI components within the context of a component’s view template.

I’m going to give it some more thought and see if it makes sense to support the key attribute outside the context of a component view template.

[darrenfu]

@mindeavor In the official document, it mentions:
The key attribute can be applied to both HTML elements and custom tags for UI components. If applied to an HTML element, a unique id attribute will be added to the HTML element. The assigned ID will be a concatenation of the parent component ID with the provided value of the key attribute.

I think my use case is to apply on the html element. And, later, I can use this.getEl(elId) to manipulate the DOM.