on the MDN Guide on Custom Elements <linked-image data-name=“Zoey by Lindsey Wilson" data-img="https://emberjs.com/images/zoey.png" data-url=“https://emberjs.com"> </linked-image>
MODULE SYNTAX CUSTOM ELEMENTS HTML IMPORT SHADOW DOM // exporting components export const Component = // … // importing components import { Component } from ‘../components/my-custom-element.js'; http://slides.com/sara_harkousse/web-components-talk-ruhrjs-2017#/19 It’s all rainbows and unicorns! Is it? Sara Harkousse at RuhrJS 2017
initializeCustomElement(app: Application, name: string): void { // creating a GlimmerElement instance from HTMLElement function GlimmerElement() { return Reflect.construct(HTMLElement, [], GlimmerElement); } GlimmerElement.prototype = Object.create(HTMLElement.prototype, { constructor: { value: GlimmerElement }, connectedCallback: { value: function connectedCallback(): void { // ... bring element into the DOM and do setup work // ... } } }); // finally registering the component via customElements v1 API window.customElements.define(name, GlimmerElement); }
initializeCustomElement(app: Application, name: string): void { // creating a GlimmerElement instance from HTMLElement function GlimmerElement() { return Reflect.construct(HTMLElement, [], GlimmerElement); } GlimmerElement.prototype = Object.create(HTMLElement.prototype, { constructor: { value: GlimmerElement }, connectedCallback: { value: function connectedCallback(): void { // ... bring element into the DOM and do setup work // ... } } }); // finally registering the component via customElements v1 API window.customElements.define(name, GlimmerElement); }
initializeCustomElement(app: Application, name: string): void { // creating a GlimmerElement instance from HTMLElement function GlimmerElement() { return Reflect.construct(HTMLElement, [], GlimmerElement); } GlimmerElement.prototype = Object.create(HTMLElement.prototype, { constructor: { value: GlimmerElement }, connectedCallback: { value: function connectedCallback(): void { // ... bring element into the DOM and do setup work // ... } } }); // finally registering the component via customElements v1 API window.customElements.define(name, GlimmerElement); }
initializeCustomElement(app: Application, name: string): void { // creating a GlimmerElement instance from HTMLElement function GlimmerElement() { return Reflect.construct(HTMLElement, [], GlimmerElement); } GlimmerElement.prototype = Object.create(HTMLElement.prototype, { constructor: { value: GlimmerElement }, connectedCallback: { value: function connectedCallback(): void { // ... bring element into the DOM and do setup work // ... } } }); // finally registering the component via customElements v1 API window.customElements.define(name, GlimmerElement); }
import Component from "@glimmer/component"; import L from 'leaflet'; export default class GlimmerMap extends Component { didInsertElement() { this.createMapInstance(); } }
POWERED DEVELOPMENTS ‣ <slot></slot> for “yielding” component content ‣ Styles in ShadowDOM or as co-located CSS ‣ Testing Story for Glimmer.js apps glimmerjs/glimmer-blueprint - PR by robbiepitts
POWERED DEVELOPMENTS ‣ <slot></slot> for “yielding” component content ‣ Styles in ShadowDOM or as co-located CSS ‣ Testing Story for Glimmer.js apps emberjs/rfcs - PR by rwjblue
jayjayjpg
civitaspo
jhashimoto
ynt0485
subroh0508
ysuzuki
aeonpeople
yuyatakeyama
iotengineer22
edeandrea
jacopen
nobutomurata
shoota
konakalab
minecr
soudai
irinanazarova
panda_program
jonrohan
eileencodes
tomoyanonymous
charlesmeaden
jnunemaker
kimpetersen
kneath
