Custom directive as root element of a directive template

[rraziel]

Hello,

I have the following 2 directives:

.directive('storageDirectoryTree', function() {
  return {
    replace: true,
    templateUrl: 'directory-tree.html'
  };
})
.directive('uiSection', function() {
  return {
    replace: true,
    templateUrl: 'section.html'
  };
})

And the following 2 HTML files (without the comments):

<!-- directory-tree.html -->
<ui-section>
  <h1> .. </h1>
  <div> .. </div>
</ui-section>

<!-- section.html -->
<div class="section">
  ..
</div>

And try to use it this way, getting the following error:

<storage-directory-tree>
  ..
</storage-directory-tree>

Error: [$compile:multidir] Multiple directives [storageDirectoryTree, uiSection] asking for template on: <ui-section>

I know that I can get it to work using {{replace: false}} but that would affect the HTML and thus the CSS, is there any way to achieve this while still replacing the elements?

[lgalfaso]

The quick answer is that this cannot be done. This is the same issue as #10612, so I will close this as a duplicate, as the limitation is the same