diff --git a/index-react.html b/index-react.html
index 8035510..ac90b9f 100644
--- a/index-react.html
+++ b/index-react.html
@@ -6,15 +6,18 @@
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 
   <script src="https://unpkg.com/react/umd/react.development.js"></script>
-  <script src="http://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.js"></script>
   <script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
   <script type="module">
     import {AmpImg} from './src/amp-react-img.js';
     import {AmpCarouselHooks} from './src/amp-react-carousel-hooks.js';
+    import {AmpLightbox} from './src/amp-react-lightbox.js';
     import {AmpSize} from './src/amp-react-size.js';
     import {AmpYoutubeHooks} from './src/amp-react-youtube-hooks.js';
     window.AmpImg = AmpImg;
     window.AmpCarousel = AmpCarouselHooks;
+    window.AmpLightbox = AmpLightbox;
     window.AmpSize = AmpSize;
     window.AmpYoutubeHooks = AmpYoutubeHooks;
   </script>
@@ -28,11 +31,75 @@
 class App extends React.Component {
   state = {
     slides: [0, 1, 2, 3, 4, 5],
+    lightbox1Open: false,
   };
 
+  constructor(props) {
+    super(props);
+    this.backButtonService = new BackButtonServiceFake();
+    this.buttonRef = React.createRef();
+  }
+
   render() {
+    const lightbox1BlockedMessage =
+      'This lightbox has unsaved changes. Are you sure you want to close it?';
     return (
       <main>
+        <ReactRouterDOM.BrowserRouter>
+          <ReactRouterDOM.Route>
+            {props => (
+              <AmpLightbox
+                  history={props.history}
+                  routerProps={props}
+                  id="lightbox1"
+                  open={this.state.lightbox1Open}
+                  onClose={() => this.setState({lightbox1Open: false})}
+                  closeConfirm={this.state.lightbox1Blocked && lightbox1BlockedMessage}
+                  deps={{backButton: this.backButtonService}}
+                  // TBD: no way to inject ref.current instead? No re-render
+                  // on hydration...
+                  transitionAnchor={this.buttonRef}
+                  >
+                <div>This is a lightbox</div>
+
+                <AmpImg
+                    id="l1_img1"
+                    alt="bindable"
+                    src="https://via.placeholder.com/90x90.png?text=lightbox1-1"
+                    style={{width: '90px', height: '90px'}}>
+                </AmpImg>
+
+                <form
+                    onChange={() => this.setState({lightbox1Blocked: true})}
+                    onReset={() => this.setState({lightbox1Blocked: false})}
+                    >
+                  <textarea rows="5" cols="10"></textarea>
+                  <input type="checkbox"/>
+                  <input type="reset" value="Reset"/>
+                </form>
+
+                <div style={{height: '500vh'}}>scroll down...</div>
+
+                <AmpImg
+                    id="l1_img2"
+                    alt="bindable"
+                    src="https://via.placeholder.com/90x90.png?text=lightbox1-2"
+                    style={{width: '90px', height: '90px'}}>
+                </AmpImg>
+              </AmpLightbox>
+            )}
+          </ReactRouterDOM.Route>
+        </ReactRouterDOM.BrowserRouter>
+
+        <div>
+          <button
+              ref={this.buttonRef} 
+              onClick={() => this.setState({lightbox1Open: true})}>
+            Show lightbox
+          </button>
+        </div>
+
+
         <h1>amp-react-img</h1>
         <AmpImg
           id="first"
@@ -92,8 +159,53 @@ <h1>amp-react-img</h1>
   }
 }
 
-ReactDOM.render(<App/>, document.getElementById('app'))
 
+// TODO: redo this service via Router.history object.
+class BackButtonServiceFake {
+  /** @return BackButtonMarker */
+  push() {
+    return new BackButtonMarkerFake();
+  }
+}
+
+class BackButtonMarkerFake {
+  constructor() {
+    this.closed = false;
+    /** @type {?function()} */
+    this.onPop = null;
+
+    /** @private {boolean} */
+    this.popped_ = false;
+    this.popHandler_ = () => {
+      this.popped_ = true;
+      this.pop();
+    };
+    window.addEventListener('popstate', this.popHandler_);
+    history.pushState({index: 1}, '');
+  }
+
+  pop() {
+    if (this.closed) {
+      return;
+    }
+    this.closed = true;
+    if (this.onPop) {
+      this.onPop();
+      this.onPop = null;
+    }
+    if (!this.popped_) {
+      this.popped_ = true;
+      history.go(-1);
+    }
+    if (this.popHandler_) {
+      window.removeEventListener('popstate', this.popHandler_);
+      this.popHandler_ = null;
+    }
+  }
+}
+
+
+ReactDOM.render(<App/>, document.getElementById('app'))
 </script>
 </body>
 </html>
diff --git a/index.html b/index.html
index f1b81fb..3c4cd30 100644
--- a/index.html
+++ b/index.html
@@ -174,9 +174,12 @@
 
     <script src="https://unpkg.com/react/umd/react.development.js"></script>
     <script src="http://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/prop-types/prop-types.js"></script>
+    <script src="https://unpkg.com/react-router/umd/react-router.js"></script>
     <script type="module" src="./src/amp-react-img.js"></script>
     <script type="module" src="./src/amp-react-carousel.js"></script>
     <script type="module" src="./src/amp-react-carousel-hooks.js"></script>
+    <script type="module" src="./src/amp-react-lightbox.js"></script>
     <script type="module" src="./src/amp-react-size.js"></script>
     <script type="module" src="./src/amp-react-youtube.js"></script>
     <script type="module" src="./src/amp-react-youtube-hooks.js"></script>
@@ -200,6 +203,39 @@
   </head>
   <body>
 
+    <amp-react-lightbox id="lightbox1" hidden transition-anchor="button1">
+      <div>This is a lightbox</div>
+
+      <amp-react-img
+          id="l1_img1"
+          alt="bindable"
+          src="https://via.placeholder.com/90x90.png?text=lightbox1-1"
+          width=90
+          height=90></amp-react-img>
+
+      <form
+          onchange="console.log('form changed')"
+          onreset="console.log('form reset')">
+        <input value="">
+        <textarea rows="5" cols="50"></textarea>
+        <input type="checkbox">
+        <input type="reset" value="Reset">
+      </form>
+
+      <div style="height: 500vh">scroll down...</div>
+
+      <amp-react-img
+          id="l1_img2"
+          alt="bindable"
+          src="https://via.placeholder.com/90x90.png?text=lightbox1-2"
+          width=90
+          height=90></amp-react-img>
+    </amp-react-lightbox>
+
+    <div>
+      <button id="button1" onclick="lightbox1.activate()">Show lightbox</button>
+    </div>
+
     <h1>amp-react-img</h1>
     <amp-react-img
       id="first"
diff --git a/src/amp-element.js b/src/amp-element.js
index 4e459ef..7ef314d 100644
--- a/src/amp-element.js
+++ b/src/amp-element.js
@@ -75,6 +75,14 @@ export default function AmpElementFactory(BaseElement) {
       }
     }
 
+    activate() {
+      this.executeAction({action: 'activate'});
+    }
+
+    executeAction(invocation) {
+      this.implementation_.executeAction(invocation);
+    }
+
     handleIntersectionObserver_(records) {
       const last = records.length
         ? records[records.length - 1]
diff --git a/src/amp-react-lightbox.js b/src/amp-react-lightbox.js
new file mode 100644
index 0000000..fb2b934
--- /dev/null
+++ b/src/amp-react-lightbox.js
@@ -0,0 +1,239 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ReactCompatibleBaseElement from './react-compat-base-element.js';
+import {useStateFromProp} from './amp-react-utils.js';
+
+const {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} = React;
+
+/**
+ * We'll implement all our new extensions as React/Preact Components (TBD).
+ * They're true Components, not AmpElements/Amp.BaseElements.
+ */
+export function AmpLightbox(props) {
+  const content = props.children || [];
+
+  // TBD: `closeConfirm` prop vs `onValidateClose` callback.
+  //      Another alternative is `onCloseRequested`.
+  const {
+    closeConfirm,
+    onClose,
+    transitionAnchor,
+  } = props;
+
+  const [isOpen, setOpen] = useOpenState(props.open || false, closeConfirm);
+
+  const backdropRef = useRef();
+
+  // The lightbox can be closed by:
+  // - Back button
+  // - Escape key
+  // - Click on the backdrop
+
+  // Back button support.
+  // TBD: is back button support belongs here or the caller? QA:
+  // [+] CloseOnEsc and CloseOnClick are both supported here.
+  // [+] Logic for cancelation is complicated. This creates a weird vetoable
+  //     property concept.
+  // [-] There's no any kind of consensus on history API support between
+  //     frameworks. Lots of features are missing everywhere, such as
+  //     correct onPop, popPrompt, etc. Thus requesting a particular interface
+  //     implementation is a hurdle. For instance, vetoable close has to
+  //     re-push history states when the pop is canceled.
+  // [-] What should be a behavior when a lightbox is closed by the caller by
+  //     setting prop `open` to `false`?
+  const backButtonService = props.deps && props.deps.backButton;
+  const backButtonStateRef = useRef();
+  if (backButtonStateRef.current) {
+    // TBD: either way here looks ugly because history is pushed only once on
+    // activation. We either have to track the closeConfirm in a ref, or
+    // re-assign onPop each time. I'm leaning toward a ref.
+    backButtonStateRef.current.onPop = () => setOpen(false);
+  }
+
+  // An effect whenever the isOpen state changes.
+  useEffect(() => {
+    if (isOpen) {
+      // Do open.
+      if (backButtonService) {
+        const backButtonMarker = backButtonService.push();
+        backButtonMarker.onPop = () => setOpen(false);
+        backButtonStateRef.current = backButtonMarker;
+      }
+      function closeOnEsc(e) {
+        if (e.key == 'Escape') {
+          setOpen(false);
+        }
+      }
+      document.addEventListener('keyup', closeOnEsc);
+      // TODO: Transition: a pretty stupid sample code.
+      const transitionAnchorEl = transitionAnchor && transitionAnchor.current;
+      if (transitionAnchorEl) {
+        const backdrop = backdropRef.current;
+        backdrop.style.opacity = 0;
+        backdrop.style.transition = 'opacity 0.3s';
+        transitionAnchorEl.style.transition = 'transform 0.3s';
+        transitionAnchorEl.style.transform = 'scale(3) translate(50px, 50px)';
+        transitionAnchorEl.addEventListener('transitionend', () => {
+          backdrop.style.opacity = 1;
+          backdrop.addEventListener('transitionend', () => {
+            backdrop.style.transition = '';
+            transitionAnchorEl.style.transition = '';
+            transitionAnchorEl.style.transform = '';
+          }, {once: true});
+        }, {once: true});
+      }
+      return function unlisten() {
+        document.removeEventListener('keyup', closeOnEsc);
+      };
+    } else {
+      // Do close.
+      setOpen(false);
+      const backButtonMarker = backButtonStateRef.current;
+      if (backButtonMarker) {
+        backButtonMarker.pop();
+        backButtonStateRef.current = null;
+      }
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, [isOpen]);
+
+
+
+  // Render. Imagine JSX here.
+
+  // Navigation arrows.
+  const closeButton = () => {
+    // Default button.
+    const outs = {
+      onClick: () => setOpen(false),
+    };
+    outs['style'] = {
+      position: 'absolute',
+      width: '32px',
+      height: '32px',
+      top: '8px',
+      right: '8px',
+      // Other styles.
+      background: 'rgba(0, 0, 0, 0.25)',
+    };
+    return React.createElement('button', outs, 'x');
+  };
+
+  // Creates scroller element with `overflow-x: auto`.
+  const container = () => {
+    const outs = {
+      ref: backdropRef,
+      onClick: e => {
+        if (e.target == backdropRef.current) {
+          setOpen(false);
+        }
+      },
+    };
+    outs['style'] = {
+      display: isOpen ? 'block' : 'none',
+      // TBD: how is lightbox's background customized with the backdrop?
+      backgroundColor: 'rgba(255, 255, 255, 0.97)',
+      border: '1px dotted black',
+      paddingTop: '16px',
+      zIndex: 10000000,
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      boxSizing: 'border-box',
+      // Lightbox is immediately scrollable by default.
+      overscrollBehavior: 'contain',
+      overflowX: 'auto',
+      overflowY: 'auto',
+      WebkitOverflowScrolling: 'touch',
+    };
+    return React.createElement('div', outs, closeButton(), content);
+  };
+
+  return container();
+}
+
+function useOpenState(prop, closeConfirm) {
+  const [isOpen, setOpen] = useStateFromProp(prop || false);
+  return [
+    isOpen,
+    // TBD/TODO: make a stable function. Per React's docs:
+    // "React guarantees that setState function identity is stable and won't
+    // change on re-renders."
+    function set(value) {
+      if (isOpen && !value && closeConfirm) {
+        const msg =
+          typeof closeConfirm == 'string' ?
+          closeConfirm :
+          'Are you sure you want to close?';
+        if (window.confirm(msg)) {
+          setOpen(value);
+        }
+      } else {
+        setOpen(value);
+      }
+    },
+  ];
+}
+
+const AmpReactLightbox = ReactCompatibleBaseElement(AmpLightbox, {
+  attrs: {
+    'transition-anchor': {
+      prop: 'transitionAnchor',
+      type: 'Element',
+    },
+  },
+  passthrough: true,
+  // TBD: do property->dep mapping instead?
+  // TBD: required vs optional?
+  deps: ['backButton'],
+
+  // TBD: this API extensions may warrant overriding the base-base
+  // ReactBaseElement. Any other approach better here?
+  init(reactBaseElement) {
+    const {element} = reactBaseElement;
+    element.style.position = 'fixed';
+    element.style.zIndex = 11111111;
+    return {
+      onClose() {
+        element.setAttribute('hidden', '');
+        reactBaseElement.mutateProps({open: false});
+      },
+    };
+  },
+  executeAction(reactBaseElement, invocation) {
+    // TODO: keep ugly private calls until the API extension question is
+    // resolved.
+    const {element} = reactBaseElement;
+    switch (invocation.action) {
+      case 'activate':
+      case 'open':
+        element.removeAttribute('hidden');
+        reactBaseElement.mutateProps({open: true});
+        break;
+    }
+  },
+});
+customElements.define('amp-react-lightbox', AmpReactLightbox);
diff --git a/src/amp-react-utils.js b/src/amp-react-utils.js
index f39097d..68da81a 100644
--- a/src/amp-react-utils.js
+++ b/src/amp-react-utils.js
@@ -36,6 +36,9 @@ export function useStateFromProp(prop) {
   }
   return [
     valueRef.current,
+    // TBD/TODO: make a stable function. Per React's docs:
+    // "React guarantees that setState function identity is stable and won't
+    // change on re-renders."
     function set(value) {
       if (!Object.is(value, valueRef.current)) {
         valueRef.current = value;
diff --git a/src/react-compat-base-element.js b/src/react-compat-base-element.js
index 3c9dd77..3bfcf1e 100644
--- a/src/react-compat-base-element.js
+++ b/src/react-compat-base-element.js
@@ -60,6 +60,8 @@ export default function ReactCompatibleBaseElement(Component, opts) {
       /** @private {?Node} */
       this.container_ = null;
 
+      this.customProps_ = {};
+
       /** @private {?Component} */
       this.el_ = null;
 
@@ -71,6 +73,15 @@ export default function ReactCompatibleBaseElement(Component, opts) {
         renderable: false,
         playable: false,
       };
+
+      // TBD: Yep. Very ugly. See notes in `opts` decl in
+      // `amp-react-lightbox.js`.
+      if (opts.init) {
+        const props = opts.init(this);
+        if (props) {
+          Object.assign(this.customProps_, props);
+        }
+      }
     }
 
     /**
@@ -133,6 +144,11 @@ export default function ReactCompatibleBaseElement(Component, opts) {
       // el.setState({ inViewport });
     }
 
+    mutateProps(props) {
+      Object.assign(this.customProps_, props);
+      this.scheduleRender_();
+    }
+
     /** @private */
     scheduleRender_() {
       if (!this.renderScheduled_) {
@@ -148,7 +164,7 @@ export default function ReactCompatibleBaseElement(Component, opts) {
     rerender_() {
       if (!this.container_) {
         // TBD: create container/shadow in the amp-element.js?
-        if (opts.children) {
+        if (opts.children || opts.passthrough) {
           this.container_ = this.element.attachShadow({mode: 'open'});
         } else {
           this.container_ = this.getWin().document.createElement('i-amphtml-c');
@@ -162,7 +178,7 @@ export default function ReactCompatibleBaseElement(Component, opts) {
         }
       }
 
-      const props = collectProps(this.element, opts);
+      const props = {...collectProps(this.element, opts), ...this.customProps_};
 
       // While this "creates" a new element, React's diffing will not create
       // a second instance of Component. Instead, the existing one already
@@ -319,10 +335,6 @@ export default function ReactCompatibleBaseElement(Component, opts) {
       throw new Error('unimplemented');
     }
 
-    activate(unusedInvocation) {
-      throw new Error('unimplemented');
-    }
-
     activationTrust() {
       throw new Error('unimplemented');
     }
@@ -348,7 +360,9 @@ export default function ReactCompatibleBaseElement(Component, opts) {
     }
 
     executeAction(invocation, unusedDeferred) {
-      throw new Error('unimplemented');
+      if (opts.executeAction) {
+        return opts.executeAction(this, invocation);
+      }
     }
 
     getDpr() {
@@ -491,7 +505,14 @@ function collectProps(element, opts) {
     const { name, value } = attributes[i];
     const def = defs[name];
     if (def) {
-      const v = def.type == 'number' ? Number(value) : value;
+      const v =
+        def.type == 'number' ?
+        Number(value) :
+        def.type == 'Element' ?
+        // TBD: what's the best way for element referencing compat between
+        // React and AMP? Currently modeled as a Ref.
+        {current: element.getRootNode().getElementById(value)} :
+        value;
       props[def.prop] = v;
     } else if (name == 'class') {
       props.className = value;
@@ -507,7 +528,9 @@ function collectProps(element, opts) {
   // as separate properties. Thus in a carousel the plain "children" are
   // slides, and the "arrowNext" children are passed via a "arrowNext"
   // property.
-  if (opts.children) {
+  if (opts.passthrough) {
+    props.children = [React.createElement('slot')];
+  } else if (opts.children) {
     const children = [];
     for (let i = 0; i < element.children.length; i++) {
       const childElement = element.children[i];
@@ -534,9 +557,74 @@ function collectProps(element, opts) {
     props.children = children;
   }
 
+  // Dependencies.
+  // TBD: what would really happen is that we will subscribe to dependencies
+  // via revamp.
+  // TBD: direct props vs context props.
+  if (opts.deps) {
+    props.deps = {};
+    opts.deps.forEach(id => {
+      props.deps[id] = resolveDep(id);
+    });
+  }
+
   return props;
 }
 
+/**
+ * Stub implementation. This will actually be something very different.
+ * @param {!Id<T>} id
+ * @return {?T}
+ */
+function resolveDep(id) {
+  switch (id) {
+    case 'backButton':
+      class BackButtonMarkerFake {
+        constructor() {
+          this.closed = false;
+          /** @type {?function()} */
+          this.onPop = null;
+
+          /** @private {boolean} */
+          this.popped_ = false;
+          this.popHandler_ = () => {
+            this.popped_ = true;
+            this.pop();
+          };
+          window.addEventListener('popstate', this.popHandler_);
+          history.pushState({index: 1}, '');
+        }
+
+        pop() {
+          if (this.closed) {
+            return;
+          }
+          this.closed = true;
+          if (this.onPop) {
+            this.onPop();
+            this.onPop = null;
+          }
+          if (!this.popped_) {
+            this.popped_ = true;
+            history.go(-1);
+          }
+          if (this.popHandler_) {
+            window.removeEventListener('popstate', this.popHandler_);
+            this.popHandler_ = null;
+          }
+        }
+      }
+      class BackButtonServiceFake {
+        /** @return BackButtonMarker */
+        push() {
+          return new BackButtonMarkerFake();
+        }
+      }
+      return new BackButtonServiceFake();
+  }
+  return null;
+}
+
 /**
  * @param {!Element} element
  * @param {!Object} defs