Component DSL.md

CSS Component

.MyComponent {
  @component children;
  background-color: #000;
  
  .icon {
    background: #FF0000;
    @component icon;
  }
}

Supports Multiple Rendering Targets

React

import React from 'react';

const MyComponent = ({icon, children}) => (
  <div>
    <style>
    .axy {
      background-color: #000;
    }

    .zjy {
      background-color: #FF0000;
    }
    </style>
    <div className='axy'>
      {children}
      <div class='zjy'>
        {icon}
      </div>
    </div>
  </div>
);

export default MyComponent;

Angular 2

import { Component } from '@angular/core';
@Component({
  selector: 'MyComponent',
  template: '
  <div>
    <style>
    .axy {
      background-color: #000;
    }

    .zjy {
      background-color: #FF0000;
    }
    </style>
    <div className='axy'>
      <ng-content></ng-content>
      <div class='zjy'>
        <ng-content select="icon"></ng-content>
      </div>
    </div>
  </div>
'
})
export class AppComponent { }