packages/mip/src/mip1-polyfill/element.js
function createBaseElementProto () {
  if (baseElementProto) {
    return baseElementProto
  }

  // Base element inherits from HTMLElement
  let proto = Object.create(HTMLElement.prototype)

  /**
   * Created callback of MIPElement. It will initialize the element.
   */
  proto.createdCallback = function () {
    // get mip1 clazz from custom elements store
    let CustomElement = customElementsStore.get(this.tagName, 'mip1')

    this.classList.add('mip-element')

    /**
     * Viewport state
     * @private
     * @type {boolean}
     */
    this._inViewport = false

    /**
     * Whether the element is into the viewport.
     * @private
     * @type {boolean}
     */
    this._firstInViewport = false

    /**
     * The resources object.
     * @private
     * @type {Object}
     */
    this._resources = resources

    /**
     * Instantiated the custom element.
     * @type {Object}
     * @public
     */
    let customElement = this.customElement = new CustomElement(this)
    customElement.createdCallback()

    // Add first-screen element to performance.
    if (customElement.hasResources()) {
      performance.addFsElement(this)
    }
  }

  /**
   * When the element is inserted into the DOM, initialize the layout and add the element to the '_resources'.
   */
  proto.attachedCallback = function () {
    // Apply layout for this.
    this._layout = applyLayout(this)
    this.customElement.attachedCallback()
    this._resources.add(this)
  }

  /**
   * When the element is removed from the DOM, remove it from '_resources'.
   */
  proto.detachedCallback = function () {
    this.customElement.detachedCallback()
    this._resources.remove(this)
    performance.fsElementLoaded(this)
  }

  proto.attributeChangedCallback = function (attributeName, oldValue, newValue, namespace) {
    let ele = this.customElement
    prerender.execute(() => {
      ele.attributeChangedCallback(...arguments)
    }, this)
  }

  /**
   * Check whether the element is in the viewport.
   *
   * @return {boolean}
   */
  proto.inViewport = function () {
    return this._inViewport
  }

  /**
   * Called when the element enter or exit the viewport.
   *
   * @param {boolean} inViewport whether in viewport or not
   * And it will call the firstInviewCallback and viewportCallback of the custom element.
   */
  proto.viewportCallback = function (inViewport) {
    this._inViewport = inViewport
    if (!this._firstInViewport) {
      this._firstInViewport = true
      this.customElement.firstInviewCallback()
    }
    this.customElement.viewportCallback(inViewport)
  }

  /**
   * Check whether the building callback has been executed.
   *
   * @return {boolean}
   */
  proto.isBuilt = function () {
    return this._built
  }

  /**
   * Check whether the element need to be rendered in advance.
   *
   * @return {boolean}
   */
  proto.prerenderAllowed = function () {
    return this.customElement.prerenderAllowed()
  }

  /**
   * Build the element and the custom element.
   * This will be executed only once.
   */
  proto.build = function () {
    if (this.isBuilt()) {
      return
    }

    // Add `try ... catch` avoid the executing build list being interrupted by errors.
    try {
      this.customElement.build()
      this._built = true
      customEmit(this, 'build')
    } catch (e) {
      customEmit(this, 'build-error', e)
      console.error(e)
    }
  }

  /**
   * Method of executing event actions of the custom Element
   *
   * @param {Object} action event action
   */
  proto.executeEventAction = function (action) {
    this.customElement.executeEventAction(action)
  }

  /**
   * Called by customElement. And tell the performance that element is loaded.
   * @deprecated
   */
  proto.resourcesComplete = function () {
    performance.fsElementLoaded(this)
  }

  baseElementProto = proto

  return baseElementProto
}
function createBaseElementProto () {
  if (baseElementProto) {
    return baseElementProto
  }

  // Base element inherits from HTMLElement
  let proto = Object.create(HTMLElement.prototype)

  /**
   * Created callback of MIPElement. It will initialize the element.
   */
  proto.createdCallback = function () {
    // get mip1 clazz from custom elements store
    let CustomElement = customElementsStore.get(this.tagName, 'mip1')

    this.classList.add('mip-element')

    /**
     * Viewport state
     * @private
     * @type {boolean}
     */
    this._inViewport = false

    /**
     * Whether the element is into the viewport.
     * @private
     * @type {boolean}
     */
    this._firstInViewport = false

    /**
     * The resources object.
     * @private
     * @type {Object}
     */
    this._resources = resources

    /**
     * Instantiated the custom element.
     * @type {Object}
     * @public
     */
    let customElement = this.customElement = new CustomElement(this)
    customElement.createdCallback()

    // Add first-screen element to performance.
    if (customElement.hasResources()) {
      performance.addFsElement(this)
    }
  }

  /**
   * When the element is inserted into the DOM, initialize the layout and add the element to the '_resources'.
   */
  proto.attachedCallback = function () {
    // Apply layout for this.
    this._layout = applyLayout(this)
    this.customElement.attachedCallback()
    this._resources.add(this)
  }

  /**
   * When the element is removed from the DOM, remove it from '_resources'.
   */
  proto.detachedCallback = function () {
    this.customElement.detachedCallback()
    this._resources.remove(this)
    performance.fsElementLoaded(this)
  }

  proto.attributeChangedCallback = function (attributeName, oldValue, newValue, namespace) {
    let ele = this.customElement
    prerender.execute(() => {
      ele.attributeChangedCallback(...arguments)
    }, this)
  }

  /**
   * Check whether the element is in the viewport.
   *
   * @return {boolean}
   */
  proto.inViewport = function () {
    return this._inViewport
  }

  /**
   * Called when the element enter or exit the viewport.
   *
   * @param {boolean} inViewport whether in viewport or not
   * And it will call the firstInviewCallback and viewportCallback of the custom element.
   */
  proto.viewportCallback = function (inViewport) {
    this._inViewport = inViewport
    if (!this._firstInViewport) {
      this._firstInViewport = true
      this.customElement.firstInviewCallback()
    }
    this.customElement.viewportCallback(inViewport)
  }

  /**
   * Check whether the building callback has been executed.
   *
   * @return {boolean}
   */
  proto.isBuilt = function () {
    return this._built
  }

  /**
   * Check whether the element need to be rendered in advance.
   *
   * @return {boolean}
   */
  proto.prerenderAllowed = function () {
    return this.customElement.prerenderAllowed()
  }

  /**
   * Build the element and the custom element.
   * This will be executed only once.
   */
  proto.build = function () {
    if (this.isBuilt()) {
      return
    }

    // Add `try ... catch` avoid the executing build list being interrupted by errors.
    try {
      this.customElement.build()
      this._built = true
      customEmit(this, 'build')
    } catch (e) {
      customEmit(this, 'build-error', e)
      console.error(e)
    }
  }

  /**
   * Method of executing event actions of the custom Element
   *
   * @param {Object} action event action
   */
  proto.executeEventAction = function (action) {
    this.customElement.executeEventAction(action)
  }

  /**
   * Called by customElement. And tell the performance that element is loaded.
   * @deprecated
   */
  proto.resourcesComplete = function () {
    performance.fsElementLoaded(this)
  }

  baseElementProto = proto

  return baseElementProto
}
function createBaseElementProto ( ) { if ( baseElementProto ) { return baseElementProto } // Base element inherits from HTMLElement let proto = Object . create ( HTMLElement . prototype ) /**
   * Created callback of MIPElement. It will initialize the element.
   */ proto . createdCallback = function ( ) { // get mip1 clazz from custom elements store let CustomElement = customElementsStore . get ( this . tagName , 'mip1' ) this . classList . add ( 'mip-element' ) /**
     * Viewport state
     * @private
     * @type {boolean}
     */ this . _inViewport = false /**
     * Whether the element is into the viewport.
     * @private
     * @type {boolean}
     */ this . _firstInViewport = false /**
     * The resources object.
     * @private
     * @type {Object}
     */ this . _resources = resources /**
     * Instantiated the custom element.
     * @type {Object}
     * @public
     */ let customElement = this . customElement = new CustomElement ( this ) customElement . createdCallback ( ) // Add first-screen element to performance. if ( customElement . hasResources ( ) ) { performance . addFsElement ( this ) } } /**
   * When the element is inserted into the DOM, initialize the layout and add the element to the '_resources'.
   */ proto . attachedCallback = function ( ) { // Apply layout for this. this . _layout = applyLayout ( this ) this . customElement . attachedCallback ( ) this . _resources . add ( this ) } /**
   * When the element is removed from the DOM, remove it from '_resources'.
   */ proto . detachedCallback = function ( ) { this . customElement . detachedCallback ( ) this . _resources . remove ( this ) performance . fsElementLoaded ( this ) } proto . attributeChangedCallback = function ( attributeName , oldValue , newValue , namespace ) { let ele = this . customElement prerender . execute ( ( ) => { ele . attributeChangedCallback ( ... arguments ) } , this ) } /**
   * Check whether the element is in the viewport.
   *
   * @return {boolean}
   */ proto . inViewport = function ( ) { return this . _inViewport } /**
   * Called when the element enter or exit the viewport.
   *
   * @param {boolean} inViewport whether in viewport or not
   * And it will call the firstInviewCallback and viewportCallback of the custom element.
   */ proto . viewportCallback = function ( inViewport ) { this . _inViewport = inViewport if ( ! this . _firstInViewport ) { this . _firstInViewport = true this . customElement . firstInviewCallback ( ) } this . customElement . viewportCallback ( inViewport ) } /**
   * Check whether the building callback has been executed.
   *
   * @return {boolean}
   */ proto . isBuilt = function ( ) { return this . _built } /**
   * Check whether the element need to be rendered in advance.
   *
   * @return {boolean}
   */ proto . prerenderAllowed = function ( ) { return this . customElement . prerenderAllowed ( ) } /**
   * Build the element and the custom element.
   * This will be executed only once.
   */ proto . build = function ( ) { if ( this . isBuilt ( ) ) { return } // Add `try ... catch` avoid the executing build list being interrupted by errors. try { this . customElement . build ( ) this . _built = true customEmit ( this , 'build' ) } catch ( e ) { customEmit ( this , 'build-error' , e ) console . error ( e ) } } /**
   * Method of executing event actions of the custom Element
   *
   * @param {Object} action event action
   */ proto . executeEventAction = function ( action ) { this . customElement . executeEventAction ( action ) } /**
   * Called by customElement. And tell the performance that element is loaded.
   * @deprecated
   */ proto . resourcesComplete = function ( ) { performance . fsElementLoaded ( this ) } baseElementProto = proto return baseElementProto }
Create a basic prototype of mip elements classes

@return {Object}
Create a basic prototype of mip elements classes