JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="app">
    <mydir></mydir>
</body>

JavaScript

angular.module('app', [])
.directive('log', function() {
    return {
        compile: function(ele, attr) {
            console.log(ele[0].nodeName + ': compile phase.');
            return {
                pre: function(scope, ele, attr) { 
                    console.log(ele[0].nodeName + ': prelink phase.');
                },
                post: function(scope, ele, attr) { 
                    console.log(ele[0].nodeName + ': postlink phase.');
                }
            }
        } 
    };
})
.directive('mydir', function() {
    return {
        restrict: 'E',
        template: '<span log>SPAN<div log>DIV111111111111</span>',
        compile: function() {
            console.warn('<mydir> compile phase');
            return {
                pre: function() { console.warn('<mydir> prelink phase'); },
                post: function() { console.warn('<mydir> postlink phase'); }
            };
        },
        replace: true
    };
});