[SOLVED] Is there a way to replace my component in dom with its contents?

Is there a way to replace my component in dom with its contents?

I am currently using a 3rd party utility, called JQXDocking. Its a pretty simple and straight-forward design. Upon looking into it on a deeper level though I figured the page would get bulky so, i abstracted all of the docked widgets to custom components.

The issue with the jqxDocking concept though is that it is looking for divs, etc. I break the design because instead of a direct child being a div, it is my custom component

// What it was
<jqxDocking>
<div><div>title</div><div>content</div></div>
</jqxDocking>

// What it is now.
<jqxDocking>
  <my-component></my-component>
</jqxDocking>

inside my-component has the proper dom structure that jqxDocking is looking for.  So i was hoping for a way to replace in markup correctly such that the component works.

because of this new layer in the DOM, the parent component cant interpret my code correctly.

Is there a way to create a custom component but replace with the template html?

So, if i wrap it with a div, it will gain part of its implementation

<jqxDocking>
  <div class=column">
    <div class="card">
      <my-component></my-component>
    </div>
  </div>
</jqxDocking>

but its title is undefined, because it doesnt understand the title which is in my component.

So i pull that from the component

<jqxDocking>
  <div class="column">
    <div class="card">
      <div>Title</div>
      <my-component></my-component>
    </div>
  </div>
</jqxDocking>

So I could do that, but it just doesnt look all that good. I may have to just template that out in the markup, instead of componentizing.

Solution

To avoid having the my-component element in the output HTML, you can define the component selector as an attribute selector:

selector: "[my-component]"

and set that attribute on the container element in the template:

<jqxDocking my-component></jqxDocking>

See this stackblitz for a demo.