JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="dirAppModule">
  <script type="text/ng-template" id="text.html">
  <div>
    <h3 ng-transclude></h3>
  </div>
  </script>
  <div ng-controller="compileCtrl">
    <level-one>
      <level-two>
        <level-three>
          hello,{{name}}
        </level-three>
      </level-two>
    </level-one>
  </div>
</body>

CSS

*{
      font-family:'MICROSOFT YAHEI';
      font-size:12px
    }

JavaScript

var appModule = angular.module('dirAppModule',[]);

appModule.controller('compileCtrl',function($scope){
    $scope.name="code_bunny"
});
appModule.directive('levelOne',function(){
    return {
        restrict:'E',
        scope:true,
        compile:function(tEle,tAttrs,trans){
            console.log('compile→'+'levelOne'+tEle.html());
            return {
                pre:function(scope,iEle,iAttrs){
                    console.log('pre→'+'levelOne'+iEle.html())
                },
                post:function(scope,iEle,iAttrs){
                    console.log('post→'+'levelOne'+iEle.html())
                }
            }
        }
    }
});
appModule.directive('levelTwo',function(){
    return {
        restrict:'E',
        scope:true,
        compile:function(tEle,tAttrs,trans){
            console.log('compile→'+'levelTwo'+tEle.html());
            return {
                pre:function(scope,iEle,iAttrs){
                    console.log('pre→'+'levelTwo'+iEle.html())
                },
                post:function(scope,iEle,iAttrs){
                    console.log('post→'+'levelTwo'+iEle.html())
                }
            }
        }
    }
});
appModule.directive('levelThree',function(){
    return {
        restrict:'E',
        scope:true,
        compile:function(tEle,tAttrs,trans){
            console.log('compile→'+'levelThree'+tEle.html());
            return {
                pre:function(scope,iEle,iAttrs){
                    console.log('pre→'+'levelThree'+iEle.html())
                },
                post:function(scope,iEle,iAttrs){
                    console.log('post→'+'levelThree'+iEle.html())
                }
            }
        }
    }
});