custom element example

app/app.js

@@ -2,6 +2,7 @@ import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'ember-guides/config/environment';
+import { registerCustomElement } from './custom-elements';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
@@ -10,3 +11,4 @@ export default class App extends Application {
 }
 
 loadInitializers(App, config.modulePrefix);
+registerCustomElement();

app/custom-elements/index.js

@@ -0,0 +1,5 @@
+import ZoeySays from './zoey-says';
+
+export function registerCustomElement() {
+  customElements.define('zoey-says', ZoeySays);
+}

app/custom-elements/zoey-says.js

@@ -0,0 +1,82 @@
+const content = `
+
+<style>
+.cta {
+  background-color: #FFFAD6;
+  background-color: var(--color-yellow-light);
+  border-radius: 0.625rem;
+  border-radius: var(--radius-lg);
+  margin: 0.5rem auto;
+  margin: var(--spacing-1) auto;
+  max-width: 90%;
+  position: relative;
+  overflow: hidden;
+}
+.cta .cta-note {
+  display: flex;
+  justify-content: space-between;
+}
+.cta-note .cta-note-body {
+  padding: 1rem;
+  padding: var(--spacing-2);
+  padding-left: 2.5rem;
+  padding-left: var(--spacing-4);
+}
+.cta-note .cta-note-heading {
+  font-size: 1.1875rem;
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  font-weight: var(--font-weight-3);
+  line-height: calc(24 / 19);
+  line-height: var(--line-height-lg);
+  margin-bottom: 0.5rem;
+  margin-bottom: var(--spacing-1);
+}
+.cta-note img {
+  margin: 1rem;
+  margin: var(--spacing-2);
+  transform: rotate(15deg);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.cta:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0px;
+  height: 0px;
+  border-radius: 0 0 0.625rem 0;
+  border-radius: 0 0 var(--radius-lg) 0;
+  border-width: 16px;
+  border-color: #f4f6f8 #FFEC64 #FFEC64 #f4f6f8;
+  border-color: var(--color-gray-100) var(--color-yellow) var(--color-yellow) var(--color-gray-100);
+  border-style: solid;
+}
+@media only percy {
+  .cta-note .cta-note-heading,
+  .cta-note img {
+    visibility: hidden;
+  }
+}
+</style>
+
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+        <slot>
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="">
+  </div>
+</div>
+`;
+
+export default class ZoeySays extends HTMLElement {
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.innerHTML = content;
+  }
+}

guides/release/getting-started/quick-start.md

@@ -246,19 +246,10 @@ decreasing the coupling of our component to where it's used.
 
 Our component is called `<PeopleList>`, based on its name on the file system. Please note that the letters P and L are capitalized.
 
-<div class="cta">
-  <div class="cta-note">
-    <div class="cta-note-body">
-      <div class="cta-note-heading">Zoey says...</div>
-      <div class="cta-note-message">
-        A component's name is derived from its file name.
-        We capitalize the first letter and every letter after <code>-</code>, then remove the hyphens.
-        This is known as pascal case.
-      </div>
-    </div>
-    <img src="/images/mascots/zoey.png" role="presentation" alt="">
-  </div>
-</div>
+<zoey-says>
+  If you are having trouble getting this running, other Ember developers would be happy to help!    
+  Visit [The Ember Community Page](https://emberjs.com/community/) to join chat groups or forums.
+</zoey-says>
 
 Save this template and switch back to the `scientists` template.