Bricks editor is adding the duplicate outer wrapper for child elements. This is making the messy design. Style from the Style tab of the parent element is applied to the child elements wrapper. See the image.
For this reason, the same style of the parent element is applied to the child elements wrapper.
I used this code
public static function render_builder() { ?>
<script type="text/x-template" id="tmpl-bricks-element-bu-cart-counter">
<component
:is="'div'"
>
//... some html code here
<div
v-if="settings.cta == 'popup'"
class="bu-cart-counter-popup"
>
<bricks-nestable :element="element" />
</div>
</component>
</script>
<?php
}
2nd Issue:
Child elements are not appending. I made the header template and added a nestable element there. When I am editing a page on builder editor and checking the preview of that nestable element there, child elements are not showing. It is totally blank.