Component Stacking Contexts

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['my-component']
});

components.slider-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['slider-component']
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

/*
	PARENT WEBSITE
	outside of my control
*/
body {
  width: 100%;
  margin: 0;
  font-family: Verdana;
  text-align: center;
  background-color: white;
}
.header {
  width: 100%;
  height: 5rem;
  background-color: rgb(255, 255, 220);
  
  /* stacking context */
  position: fixed;
  z-index: 600;
}
.main {
  padding-top: 5rem;
  background-color: rgb(220, 255, 255);
  height: 1500px;
}
.main .title {
  margin: 2rem 0 0;
}
.footer {
  width: 100%;
  height: 5rem;
  background-color: rgb(255, 255, 220);
}
.title {
  display: block;
  font-size: 2rem;
}



/*
	THIRD PARTY COMPONENT
	{{slider-component}}
	(black box) out of my control
*/

.slider-component {
  /* stacking context */
  position: relative;
}
.slider-container {
  margin: 0 auto;
  width: 20rem;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: orange;
  
  /* stacking context */
  z-index: 1;
}
.slider-component svg {
  width: 40px;
  height: 40px;
  color: orange;
  position: absolute;
  top: 60px;
  cursor: pointer;
  
  /* stacking context */
  z-index: 999;
}
.slider-component svg path {
  fill: currentColor;
}
.slider-component .leftArrow {
  left: 75px;
}
.slider-component .rightArrow {
  right: 75px;
}



/*
	MY COMPONENT
	{{my-component}}
	completely under my control
*/
.my-component {
  padding: 20px;
  background: lightgray;
  
  position: relative;
  z-index: 0;
}

templates.application.hbs

<div class="header">
  <span class="title">Header</span>
</div>

<div class="main">
  <span class="title">Main Content</span>
  belongs to the parent website
  <br>
  <br>
  <br>
  
  {{#my-component}}
  	{{slider-component}}
  {{/my-component}}
</div>

<div class="footer">
  <span class="title">Footer</span>
</div>

templates.components.my-component.hbs

{my-component}
<br>
I only have control over this context
<br>
<br>
{{yield}}

templates.components.slider-component.hbs

<svg class="leftArrow" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg">
	<title>left arrow</title>
  <path d="M6.4 12.3c-.2 0-.4 0-.5-.2L0 6.1 5.9.3c.3-.3.8-.3 1 0 .4.3.4.8 0 1.1L2.3 6.2 7 11a.8.8 0 0 1-.6 1.3" fill="#FFF" fill-rule="evenodd"/>
</svg>

<div class="slider-container">
	{slider-component}
  <br>
  from a 3rd party vendor
</div>

<svg class="rightArrow" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg">
	<title>right arrow</title>
  <path d="M.8 12.3c.2 0 .4 0 .5-.2l5.9-6L1.3.3a.8.8 0 0 0-1 0c-.4.3-.4.8 0 1.1L5 6.2.2 11a.8.8 0 0 0 .6 1.3" fill="#FFF" fill-rule="evenodd"/>
</svg>

twiddle.json

{
  "version": "0.15.1",
  "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.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}