How to avoid adding a wrapper div/tagName? When dropping a custom component in the canvas.

[FaisalShaikhHA]

I have created a custom component slider and added data-gjs-type="slider" to the root element but when I drop it on the canvas there are two slider components visible on the layers manager.
I know that this is because I have added data-gjs-type="slider" on my component's root element, grapesjs adds one wrapper element with the same attribute, and hence two slider components are visible.
But I want to avoid that wrapper element because it hides behind the component root element and then it is undetectable unless we navigate to layer manager. Please let me know how can I achieve this. Thank you
Screenshot: https://d.pr/i/yYpZKn

domc.addType("slider", {
     model: defaultModel.extend(
         {
             defaults: {
                 ...defaultModel.prototype.defaults,
                 type: "slider",
                 components: '<slider-element data-gjs-type="slider"></slider-element>',
 });

ed.Blocks.add("slider-block", {
     label: "Slider",
     category: "Custom",
     attributes: { class: "fa fa-file-text" },
     content: { type: "slider" },
     activate: true,
 });

[artf]

When you define a new custom component you should describe the component itself by using properties like tagName, the components property is for children. You should also refer to the documentation as you're using an old API.

// No need to use defaultModel.extend, or adding `data-gjs-type` attribute
domc.addType('slider', {
  model: {
    defaults: {
      tagName: 'slider-element'
    }
  },
});

[FaisalShaikhHA]

Thanks for the reply @artf, yes I went through the documentation but the problem is I have to wrap the component in between
'section' tag so used following code:

domc.addType('slider', {
  model: {
    defaults: {
      tagName: 'section',
      components: `
       <slider-element class="bg-gray-200 d-lg-flex swiper-container carousel d-block position-relative mb-14">
          ...
       </slider-element>`,
    },
  },
});

But the 'section' tag is hidden behind the 'silder-element' tag which is why I used 'data-gjs-type' on the 'slider-element' tag so that traits for the component are visible on component selection.

Screen.Capture.on.2022-09-06.at.10-55-11.mp4

[artf]

I'd suggest defining your slider component without a section, you can wrap the slider later in your blocks.

ed.Blocks.add("slider-block", {
  // ...
  content: { 
    tagName: 'section', 
    components: { type: 'slider' } 
  },
});

[FaisalShaikhHA]

Thank you @artf, it is working.