Upon reviewing a question on Stack Overflow, I learned that nested optgroups are not supported in the HTML5 spec. While it is possible to manually style them, I am curious if Angular Material offers a solution.
Angular Material internally swaps many elements for divs and applies custom styling, leading me to believe they may have a workaround for this issue.
If I have the following code snippet, I would expect the md-optgroup with label="Second level deep" to be indented further:
<md-input-container>
<md-select ng-model="vm.someModel">
<md-optgroup label="One level deep">
<md-option>
One level deep
</md-option>
</md-optgroup>
<md-optgroup label="Another group">
<md-optgroup label="Second level deep">
<md-option>Two levels deep</md-option>
</md-optgroup>
</md-optgroup>
</md-select>
</md-input-container>
However, all md-optgroups appear unindented and displayed the same way.
I hoped for a visual similar to this example:
The official demos and documentation do not provide information on nesting option groups with varying indentation. Is there a built-in method within Angular Material to achieve this effect? Perhaps utilizing flex?