Utilizing bootstrap UI in conjunction with AngularJS directives, I am looking to customize the default styles that bootstrap applies to its elements.
Is it recommended to target the HTML contents within the template?
Referring to the examples provided in the documentation, my intention is to incorporate the accordion.
Upon defining it in HTML, the structure appears as follows:
<accordion>
<accordion-group heading="my heading">
content here
</accordion-group>
However, upon processing the directive template, the HTML transformations are notable:
<accordion close-others="oneAtATime"><div class="panel-group" ng-transclude="">
<div class="panel panel-default ng-isolate-scope" heading="my heading">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
<span ng-class="{'text-muted': isDisabled}" class="ng-binding">content here</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
<div class="panel-body" ng-transclude=""><span class="ng-scope">some content here</span></div>
</div>
The transformation is quite significant. If I aim to alter the appearance of the panel title, should I define this in my CSS files?
div.panel {}
and hope that the template remains static in the future?
What would be the most effective approach to modifying styles for HTML elements generated by a directive's templates?