block的before after不明白

[HerringtonDarkholme]

[hax]

c.jedi定义了一个fragment #main。

b.jedi导入了c.jedi并追加了#main::before和#new-block。b.jedi的实际结果相当于是：

div
  'hahah'
  #main
    #main::before
      'hoho'

#new-block 被丢弃了，因为在c.jedi里并没有对应的#new-block。如果你希望提供#new-block给其他模板去填充，应该把#new-block缩进在#main::before里。这样就相当于：

div
  'hahah'
  #main
    #main::before
      'hoho'
      #new-block
         'new-block'

这样a.jedi导入b.jedi的结果就相当于

div
  'hahah'
  #main
    'from a'

整个#main被替换了。#new-block::after（注意语法是::after不是append）也被丢弃了，因为#main被替换了，里面并没有#new-block。

假如a.jedi里的#main换成#main::after则结果相当于：

div
  'hahah'
  #main
    #main::before
      'hoho'
      #new-block
         'new-block'
         #new-block::after
           'hahahha'
    #main::after
       'from a'

BTW，jedi的fragment机制和shadow dom的slot机制的语义是完全一致的。（语法上略有区别，另外jedi有::before和::after。）

注意，jedi的::before和::after与jade的prepend和append的区别是：jade的每一级继承都可以不断prepend和append，但jedi中是固定替换，和css的伪元素语义一样，或者说类似OO的override，一共只有3个方法可以override：

class Fragment {
   constructor(name) {}
   render() {
      this.before()
      this.content()
      this.after()
   }
   before() {}
   after() {}
   private content() {}
}

:import ...
  #main 
     ...

相当于override render()方法。