Allowed dynamic tag, but restricted it to be immutable

addon/components/container-query.hbs

@@ -1,16 +1,18 @@
-<div
-  class="container-query"
-  data-test-container-query
-  {{did-insert this.queryContainer}}
-  {{did-resize this.queryContainer debounce=this.debounce}}
-  ...attributes
->
-  {{yield (hash
-    features=this.queryResults
-    dimensions=(hash
-      aspectRatio=this.aspectRatio
-      height=this.height
-      width=this.width
-    )
-  )}}
-</div>
+{{#let (element this.tagName) as |Tag|}}
+  <Tag
+    class="container-query"
+    data-test-container-query
+    {{did-insert this.queryContainer}}
+    {{did-resize this.queryContainer debounce=this.debounce}}
+    ...attributes
+  >
+    {{yield (hash
+      features=this.queryResults
+      dimensions=(hash
+        aspectRatio=this.aspectRatio
+        height=this.height
+        width=this.width
+      )
+    )}}
+  </Tag>
+{{/let}}

addon/components/container-query.js

@@ -20,6 +20,13 @@ export default class ContainerQueryComponent extends Component {
     return this.args.debounce ?? 0;
   }
 
+  constructor() {
+    super(...arguments);
+
+    // The dynamic tag is restricted to be immutable
+    this.tagName = this.args.tagName || 'div';
+  }
+
   @action queryContainer(element) {
     this.measureDimensions(element);
     this.evaluateQueries();

package.json

@@ -56,7 +56,8 @@
     "@ember/render-modifiers": "^1.0.2",
     "ember-cli-babel": "^7.21.0",
     "ember-cli-htmlbars": "^5.2.0",
-    "ember-did-resize-modifier": "^1.0.0"
+    "ember-did-resize-modifier": "^1.0.0",
+    "ember-element-helper": "^0.3.1"
   },
   "devDependencies": {
     "@ember/optional-features": "^1.3.0",
@@ -91,8 +92,8 @@
     "ember-template-lint": "^2.9.0",
     "ember-test-selectors": "^4.1.0",
     "ember-try": "^1.4.0",
-    "eslint": "^7.3.1",
-    "eslint-plugin-ember": "^8.9.0",
+    "eslint": "^7.4.0",
+    "eslint-plugin-ember": "^8.9.1",
     "eslint-plugin-node": "^11.1.0",
     "lerna-changelog": "^1.0.1",
     "loader.js": "^4.7.0",

yarn.lock

@@ -5889,7 +5889,7 @@ ember-cli-babel-plugin-helpers@^1.0.0, ember-cli-babel-plugin-helpers@^1.1.0:
   resolved "https://registry.yarnpkg.com/ember-cli-babel-plugin-helpers/-/ember-cli-babel-plugin-helpers-1.1.0.tgz#de3baedd093163b6c2461f95964888c1676325ac"
   integrity sha512-Zr4my8Xn+CzO0gIuFNXji0eTRml5AxZUTDQz/wsNJ5AJAtyFWCY4QtKdoELNNbiCVGt1lq5yLiwTm4scGKu6xA==
 
-[email protected], ember-cli-babel@^7.21.0:
+[email protected], ember-cli-babel@^7.17.2, ember-cli-babel@^7.21.0:
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.21.0.tgz#c79e888876aee87dfc3260aee7cb580b74264bbc"
   integrity sha512-jHVi9melAibo0DrAG3GAxid+29xEyjBoU53652B4qcu3Xp58feZGTH/JGXovH7TjvbeNn65zgNyoV3bk1onULw==
@@ -6039,7 +6039,7 @@ ember-cli-htmlbars@^4.0.0:
     strip-bom "^4.0.0"
     walk-sync "^2.0.2"
 
-ember-cli-htmlbars@^5.2.0:
+ember-cli-htmlbars@^5.1.0, ember-cli-htmlbars@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-5.2.0.tgz#5ceccd0d18163dd810dea29f6fd777d0baa01e23"
   integrity sha512-EdjuUc7sq9ve6sgsG59qIzOj4svWjgYhO/QEhuV1UbOQ3ATeqNPiD++bFeAGjUhravw9HPhQPPoHnMlAikqLIw==
@@ -6291,7 +6291,7 @@ ember-cli@~3.19.0:
     watch-detector "^1.0.0"
     yam "^1.0.0"
 
-ember-compatibility-helpers@^1.1.2, ember-compatibility-helpers@^1.2.0:
+ember-compatibility-helpers@^1.1.2, ember-compatibility-helpers@^1.2.0, ember-compatibility-helpers@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.1.tgz#87c92c4303f990ff455c28ca39fb3ee11441aa16"
   integrity sha512-6wzYvnhg1ihQUT5yGqnLtleq3Nv5KNv79WhrEuNU9SwR4uIxCO+KpyC7r3d5VI0EM7/Nmv9Nd0yTkzmTMdVG1A==
@@ -6339,6 +6339,15 @@ ember-disable-prototype-extensions@^1.1.3:
   resolved "https://registry.yarnpkg.com/ember-disable-prototype-extensions/-/ember-disable-prototype-extensions-1.1.3.tgz#1969135217654b5e278f9fe2d9d4e49b5720329e"
   integrity sha1-GWkTUhdlS14nj5/i2dTkm1cgMp4=
 
+ember-element-helper@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/ember-element-helper/-/ember-element-helper-0.3.1.tgz#dd6017a64a9952058c16050c7a9eb0fff5ebfe90"
+  integrity sha512-U3tXkhiPsL1uIz2jCBZS4Lot0Le0wt7RM7TArYAR5OZRLGdCaLkRjQ0Xx5IlwWbBS0KOrfARevc1OLnX1AIgZQ==
+  dependencies:
+    ember-cli-babel "^7.17.2"
+    ember-cli-htmlbars "^5.1.0"
+    ember-compatibility-helpers "^1.2.1"
+
 ember-export-application-global@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-2.0.1.tgz#b120a70e322ab208defc9e2daebe8d0dfc2dcd46"
@@ -6783,10 +6792,10 @@ escodegen@^1.11.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-plugin-ember@^8.9.0:
-  version "8.9.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-ember/-/eslint-plugin-ember-8.9.0.tgz#010f720665b00847df151d5ae64f41e4671c825a"
-  integrity sha512-wSZuQM5AkDBc/FRL7jAIMVPQxzXSMUBgzGYzxhLNc4HOSBKVu6qqh2XZg7PTUmhst39VdYjDvep9QHmeRWdLkA==
+eslint-plugin-ember@^8.9.1:
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-ember/-/eslint-plugin-ember-8.9.1.tgz#6d76440bd7bb1954ed61c7ebbb1a1cd8c8e1afa6"
+  integrity sha512-A7TFksLfLLoQEWOHCvJX6SvxxL99yDEPwDZIh28TOgwsPsXpVYJNk22UT5ZrufUyVtdnOH4IsF3jIkRIIE91IA==
   dependencies:
     "@ember-data/rfc395-data" "^0.0.4"
     ember-rfc176-data "^0.3.13"
@@ -6846,10 +6855,10 @@ eslint-visitor-keys@^1.2.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.2.0.tgz#74415ac884874495f78ec2a97349525344c981fa"
   integrity sha512-WFb4ihckKil6hu3Dp798xdzSfddwKKU3+nGniKF6HfeW6OLd2OUDEPP7TcHtB5+QXOKg2s6B2DaMPE1Nn/kxKQ==
 
-eslint@^7.3.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.3.1.tgz#76392bd7e44468d046149ba128d1566c59acbe19"
-  integrity sha512-cQC/xj9bhWUcyi/RuMbRtC3I0eW8MH0jhRELSvpKYkWep3C6YZ2OkvcvJVUeO6gcunABmzptbXBuDoXsjHmfTA==
+eslint@^7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.4.0.tgz#4e35a2697e6c1972f9d6ef2b690ad319f80f206f"
+  integrity sha512-gU+lxhlPHu45H3JkEGgYhWhkR9wLHHEXC9FbWFnTlEkbKyZKWgWRLgf61E8zWmBuI6g5xKBph9ltg3NtZMVF8g==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.10.0"