diff --git a/text/0389-dynamic-tag-names.md b/text/0389-dynamic-tag-names.md index 7ec18e78ad..a459993aab 100644 --- a/text/0389-dynamic-tag-names.md +++ b/text/0389-dynamic-tag-names.md @@ -43,14 +43,29 @@ With the `element` helper proposed in this RFC, this can be accomplished with so ## Detailed design -We propose to add a new `element` helper that takes a tag name and generates a contextual component that, when invoked, renders the selected element. +We propose to add a new `element` helper that takes a single positional argument. + +* When passed a non-empty string it generates a contextual component that, when invoked, renders an element with the same tag name as the passed string, along with the passed attributes (if any), modifiers (if any) and yields to given block (if any). +* When passed an empty string, it generates a contextual compoment that, when invoked, yields to the given block without wrapping it an element and ignores any passed modifiers and attributes. +* When passed `null` or `undefined`, it will return `null`. +* When passed any other values (e.g. a boolean or a number), it will result in a development mode assertion. Example: ```hbs {{#let (element @htmlTag) as |Tag|}} - ... + Hello {{/let}} + +{{!-- when @htmlTag="button" --}} + + +{{!-- when @htmlTag="" --}} +Hello + +{{!-- when @htmlTag=null or @htmlTag=undefined, it renders nothing --}} + +{{!-- when @htmlTag=true or @htmlTag=1, it throws in development mode --}} ``` Unlike ids, classes or other attributes, the tag name of DOM element cannot be changed in runtime.