PolymerElements / iron-component-page

A reusable landing page for elements
36 stars 32 forks source link

proposal: customElements es6 classes #112

Closed gertcuykens closed 7 years ago

gertcuykens commented 7 years ago

iron pages can detect non polymer elements too by introducing a polymer constructor api.

class HelloWorld extends HTMLElement {                                                                                       
  constructor() {                                                                                                            
    super() 
    // polymer iron page specification                                                                                                               
    let l = document.querySelector('link[rel="import"]')                                                                     
    var t = l.import.querySelector('template')                                                                               
    const instance = t.content.cloneNode(true)                                                                               
    let shadowRoot = this.attachShadow({ mode: 'open' })                                                                     
    shadowRoot.appendChild(instance)                                                                                         
  }                                                                                                                          
}                                                                                                                            
customElements.define('hello-world', HelloWorld)
arodic commented 7 years ago

Also note that iron-component-page currently does not detect Polymer elements defined using new ES6 syntax style. For example :

class HelloWorld extends Polymer.Element {}
justinfagnani commented 7 years ago

The Polymer Analyzer already supports non-Polymer elements either by detecting a customElements.define() call, or by seeing a @customElement JSDoc annotation.

class HelloWorld extends Polymer.Element {}

should work as long as the class is annotated with @customElement, and you'll probably want @extends Polymer.Element also.

justinfagnani commented 7 years ago

Closing this assuming the feature is working as intended. cc @aomarks