A crappy "netcat"-type example (in Dart).

sky/examples/terminal/terminal.sky

 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
 <import src="/sky/framework/elements/sky-element.sky" />
-<import src="/sky/framework/elements/sky-scrollable.sky" />
 <sky-element>
 <template>
   <style>
-    #control {
+    #container {
       height: -webkit-fill-available;
+    }
+    #input-box {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 10;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
+    #output-box {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
       background-color: black;
       color: rgb(255, 191, 0);
       font-family: 'Courier', 'monospace';
       font-size: small;
     }
     .line {
+      height: 1em;
       white-space: nowrap;
     }
   </style>
-  <sky-scrollable id="control" contenteditable />
+  <div id="container">
+    <div id="input-box" contenteditable />
+    <div id="output-box" />
+  </div>
+  </div>
 </template>
 <script>
 import 'dart:async';
 import 'dart:core';
 import 'dart:sky';
 import 'package:mojo/services/terminal/public/interfaces/terminal_client.mojom.dart' as terminal;
 import 'package:sky/framework/embedder.dart';
 import 'terminal_display.dart';
 import 'terminal_file_impl.dart';
 
 // Implements the <terminal> element, which implements a "terminal display". Has
 // an |url| attribute, whose value should be a Mojo app that provides the
 // |terminal.TerminalClient| service.
 @Tagname('terminal')
 class TerminalDisplayImpl extends SkyElement implements TerminalDisplay {
-  Element _control;
+  Element _inputBox;
+  Element _outputBox;
+  int _maxLines;
 
   // Queue of unconsumed input (keystrokes), with the head at index 0.
   // Keystrokes end up here if there's no reader (i.e., |getChar()|) pending,
   // i.e., if |_readerQueue| is empty. Invariant: At most one of |_inputQueue|
   // and |_readerQueue| may be nonempty at any given time.
   List<int> _inputQueue;
 
   // Queue of things waiting for input, with the head at index 0. If a keystroke
   // is received and this is nonempty, the head is given that keystroke (and
   // dequeued).
   List<Completer<int>> _readerQueue;
 
   TerminalDisplayImpl()
       : _inputQueue = new List<int>(),
         _readerQueue = new List<Completer<int>>() {
   }
 
   void shadowRootReady() {
-    _control = shadowRoot.getElementById('control');
-    _control.addEventListener('keydown', _handleKeyDown);
-    _control.addEventListener('keypress', _handleKeyPress);
+    _inputBox = shadowRoot.getElementById('input-box');
+    _inputBox.addEventListener('keydown', _handleKeyDown);
+    _inputBox.addEventListener('keypress', _handleKeyPress);
+    _inputBox.addEventListener('wheel', _handleWheel);
+    _outputBox = shadowRoot.getElementById('output-box');
+
+    // Hack to allow |_newLine()| to work.
+    _maxLines = 100;
 
     // Initialize with the first line.
     _newLine();
 
+    // Actually compute the maximum number of lines.
+    // TODO(vtl): Recompute on resize.
+    _maxLines = _outputBox.clientHeight ~/ _outputBox.firstChild.offsetHeight;
+
     var url = getAttribute('url');
     if (url != null) {
       connect(url);
     }
   }
 
   void _handleKeyDown(KeyboardEvent event) {
     // TODO(vtl): In general, our key handling is a total hack (due in part to
     // sky's keyboard support being incomplete) -- e.g., we shouldn't have to
     // make our div contenteditable. We have to intercept backspace (^H) here,
     // since we won't actually get a keypress event for it. (Possibly, we should
     // only handle keydown instead of keypress, but then we'd have to handle
     // shift, etc. ourselves.)
     if (event.key == 8) {
       _enqueueChar(8);
       event.preventDefault();
     }
   }
 
   void _handleKeyPress(KeyboardEvent event) {
-    _enqueueChar(event.charCode);
+    if (event.charCode != 0) {
+      _enqueueChar(event.charCode);
+    }
     event.preventDefault();
   }
 
+  void _handleWheel(WheelEvent event) {
+    _outputBox.dispatchEvent(event);
+  }
+
   void _enqueueChar(int charCode) {
     // TODO(vtl): Add "echo" mode; do |putChar(event.charCode);| if echo is on.
 
     if (_readerQueue.isEmpty) {
       _inputQueue.add(charCode);
     } else {
       _readerQueue.removeAt(0).complete(charCode);
     }
   }
 
   void _backspace() {
-    var oldText = _control.lastChild.textContent;
+    var oldText = _outputBox.lastChild.textContent;
     if (oldText.length > 0) {
-      _control.lastChild.textContent = oldText.substring(0, oldText.length - 1);
+      _outputBox.lastChild.textContent = oldText.substring(0,
+                                                           oldText.length - 1);
     }
   }
 
   void _newLine() {
     var line = document.createElement('div');
     line.setAttribute('class', 'line');
-    _control.appendChild(line);
+    _outputBox.appendChild(line);
+
+    // Scroll if necessary.
+    var children = _outputBox.getChildNodes();
+    if (children.length > _maxLines) {
+      children = new List.from(children.skip(children.length - _maxLines));
+      _outputBox.setChildren(children);
+    }
   }
 
   void _clear() {
-    while (_control.firstChild != null) {
-      _control.firstChild.remove();
-    }
+    _outputBox.setChildren([]);
     _newLine();
   }
 
   void connect(String url) {
     var terminalClient = new terminal.TerminalClientProxy.unbound();
     embedder.connectToService(url, terminalClient);
     terminalClient.ptr.connectToTerminal(new TerminalFileImpl(this).stub);
     terminalClient.close();
   }
 
   void putString(String s) {
     for (var i = 0; i < s.length; i++) {
       putChar(s.codeUnitAt(i));
     }
   }
 
   // |TerminalDisplay| implementation:
 
   @override
   void putChar(int byte) {
     // Fast-path for printable chars.
     if (byte >= 32) {
-      _control.lastChild.textContent += new String.fromCharCode(byte);
+      _outputBox.lastChild.textContent += new String.fromCharCode(byte);
       return;
     }
 
     switch (byte) {
       case 8:  // BS (^H).
         _backspace();
         break;
       case 10:  // LF ('\n').
         _newLine();  // TODO(vtl): LF and CR should be separated.
         break;
@@ skipping 17 matching lines @@
 
     var completer = new Completer<int>();
     _readerQueue.add(completer);
     return completer.future;
   }
 }
 
 _init(script) => register(script, TerminalDisplayImpl);
 </script>
 </sky-element>