Enable specifying a semantic element for the CRUD component container

What does this MR do and why?

Currently, the CRUD component renders a <section> at its root. This MR leaves that default in place, but adds a prop to the Vue version and an option to the ViewComponent version that allows the dev to specify a different semantic element for the root of the component. This enables us to avoid some situations where using a <section> would be semantically inappropriate.

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

• #513961 (closed)
• #513962

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

(N/A, no change)

How to set up and validate locally

1. Check out this branch
2. In the gitlab repo, apply this diff:

diff --git a/app/views/shared/web_hooks/_index.html.haml b/app/views/shared/web_hooks/_index.html.haml
index 3ec55ebd8b78..b9479de25f14 100644
--- a/app/views/shared/web_hooks/_index.html.haml
+++ b/app/views/shared/web_hooks/_index.html.haml
@@ -1,6 +1,7 @@
 = render ::Layouts::CrudComponent.new(title,
   icon: 'hook',
   count: hooks.size,
+  container_tag: 'div',
   toggle_text: _('Add new webhook'),
   options: { class: 'gl-mt-3' }) do |c|
   - c.with_body do

3. In the GDK, visit http://gdk.test:3000/flightjs/Flight/-/hooks
4. use devtools to inspect the WebHooks crud component. You should see that it is a div.
5. In the gitlab repo, apply this diff:

diff --git a/app/assets/javascripts/admin/deploy_keys/components/table.vue b/app/assets/javascripts/admin/deploy_keys/components/table.vue
index c6baa363a9a6..4cb06584c8d5 100644
--- a/app/assets/javascripts/admin/deploy_keys/components/table.vue
+++ b/app/assets/javascripts/admin/deploy_keys/components/table.vue
@@ -197,6 +197,7 @@ export default {
     :count="totalItems.toString()"
     icon="key"
     class="gl-mt-5"
+    container-tag="div"
   >
     <template #actions>
       <gl-button size="small" :href="createPath" data-testid="new-deploy-key-button">{{

6. visit http://gdk.test:3000/admin/deploy_keys in the GDK
7. Use devtools to inspect the Public deploy keys CRUD component
8. You should see that the root of the CRUD component is a div