Contextual Components Example

components.header-component.js

import Component from '@ember/component';

export default Component.extend({
  classNames: ['header']
});

components.outer-component.js

import Component from '@ember/component';
import { assert } from '@ember/debug';

export default Component.extend({
  classNames: ['container'],

  init() {
    this._super(...arguments);
    // This is commented out because otherwise the app will crash as soon as it renders
    // assert("someArg should be blue", this.someArg === 'blue');
  }
});

components.red-background.js

import Component from '@ember/component';

export default Component.extend({
  classNames: ['bg-red']
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

styles.app.css

.container {
  background-color: yellow;
}

.container .header {
  font-weight: bold;
}

.container .bg-red {
  background-color: red;
}

templates.application.hbs

{{#outer-component someArg="red" as |things|}}
  {{log things}}
  {{things.message}}

  {{#things.header}}
    This is a header
  {{/things.header}}

  {{#things.red}}
    This should have a red background
  {{/things.red}}
{{/outer-component}}

{{!-- {{#header-component}}
  This is a header
{{/header-component}}

{{#red-background}}
  This should have a red background
{{/red-background}} --}}

templates.components.header-component.hbs

{{yield}}

templates.components.outer-component.hbs

This is the outer component.

<br>
<br>

{{yield
  (hash
    message="hello world"
    header=(component 'header-component' class="inside-container")
    red=(component 'red-background')
  )
}}

templates.components.red-background.hbs

{{yield}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}