const DEFAULT_IN = 'fadeIn'
const DEFAULT_OUT = 'fadeOut'

class Slide extends BaseElement {
  static get observedAttributes () {
    return ['active', 'in', 'out']
  }

  get active () {
    return this.hasAttribute('active')
  }

  set active (value) {
    value ? this.setAttribute('active', '')
          : this.removeAttribute('active')
  }

  get in () {
    return this.getAttribute('in') || DEFAULT_IN
  }

  get out () {
    return this.getAttribute('out') || DEFAULT_OUT
  }

  onConnect() {
    this.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      `

    this.classList.add('animated')
  }

  renderCallback () {
    if (this.active) {
      this.classList.add(this.in)
      this.classList.remove(this.out)
    } else {
      this.classList.add(this.out)
      this.classList.remove(this.in)
    }
  }
}

customElements.define('x-slide', Slide)

@@ -508,169 +508,80 @@
 his.
-style.cssText = %60%0A        position: fixed;%0A        top: 0;%0A        left: 0;%0A        width: 100%25;%0A        height: 100%25;%0A      %60%0A%0A    this.classList.add('animated'
+classList.add('animated')%0A    Object.assign(this.style, this.inlineCSS()
 )%0A  
@@ -744,24 +744,24 @@
 d(this.out)%0A
-
       this.c
@@ -794,16 +794,333 @@
    %7D%0A  %7D
+%0A%0A  inlineCSS() %7B%0A    return %7B%0A      position: 'fixed',%0A      top: 0,%0A      left: 0,%0A      display: 'flex',%0A      width: '100%25',%0A      height: '100%25',%0A      background: 'black',%0A      fontFamily: 'BlinkMacSystemFont, sans-serif',%0A      borderWidth: '30px',%0A      borderStyle: 'solid',%0A      padding: '100px'%0A    %7D%0A  %7D
 %0A%7D%0A%0Acust

Simplify inline styles for inheritance