Why does an error occur if you do not wrap the directive when it is expanded?

Question

Angular

Why is there an error in this scenario?
template: '',

<div class="container">
  <sub></sub>
</div>
<script>
  function superDirective(){
    return {
      template: '<div>text</div>'
    }
  }

  function subDirective(){
    return {
      template: '<super></super>',
      replace: true
    }
  }
  
  const app = angular.module("app", []);
  
  app.directive('super', ['$injector', superDirective]);
  app.directive('sub', ['$injector', subDirective]);
</script>

But if you wrap an expandable directive, then no?
template: '<div><super></super></div>',

Answer 1

https://docs.angularjs.org/error/$compile/multidir...
everything is written there. Specifically your case:
- Multiple directives attempting to define a template or templateURL.
when you do replace: true, your template contains only one element, super, and the current element, sub, is replaced by super, and you end up with two directives referring to the same element. In turn, Super has its own template, and a conflict occurs. If there was no template - everything would be fine.