Custom grouping components with nesting issues - JessicaOPRD/docs GitHub Wiki
Many native HTML elements and CSS frameworks expect a direct nesting order such as:
<table>
<tr>
<th>Column A</th>
<th>Column B</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
Wrapped in custom components, the structure becomes less intuitive:
<op-gallery>
<div class="row">
<op-gallery-image>
<div class="col-1">
...
</div>
</op-gallery-image>
</div>
</op-gallery>
This can interfere with intended nesting styles or even default layout behavior. Not every component-based framework has an "easy" or intuitive fix. Below are some fixes for reference when moving between frameworks.
Note that AngularJS did once support a replace
property on the component definition, to be used in conjunction with transclude
. This has been deprecated.
This will likely only prevent some nesting in a grouped scenario, but everything helps. Instead of:
<div class="row">
<ng-transclude></ng-transclude>
</div>
Attempt:
<div class="row" ng-transclude>
There may be another way to do this, but the strategy works in applying expected style classes to the outer root element:
function RadioChipInput($scope, $element, $attrs, ctrls) {
$element.addClass('.col-1');
}
Resulting structure
<div class="row" ng-transclude>
<op-gallery-image class="col-1">
...
</op-gallery-image>
</div>
function(tElement, attrs) {
var content = angular.element('<div class="row"></div>')
content.append(tElement.children());
tElement.replaceWith(content);
}