Just an idea of how an Apache Royale "smartHTML" component set could looks like

SmartHTMLPseudoCode.mxml

/**
* This is just some pseudo code of how a "smartHTML" component set could look like
* It creates a simple, editable table (datagrid)
* For a working HTML/CSS3 demo see: https://codepen.io/ok-at-codepen/pen/vWjQEe
*/
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:js="library://ns.apache.org/royale/basic"
                xmlns:sHtml="library://ns.apache.org/royale/smartHtml">

    <fx:Script>
            [Bindable]
            private var demoData:ArrayList = [
                {firstname:'John', lastname:Doe, age:44},
                {firstname:'Foo', lastname:Bar, age:102},
                {firstname:'Michael', lastname:Loose, age:24}
                {firstname:'Jenny', lastname:Hal, age:29}];
    </fx:Script>  

    <fx:Style>
        table {
            width: 100%;
            background-color: #ffffff;
            border: none;
            border-collapse: collapse;
            font-family: 'Roboto', sans-serif;
        }

        table thead th {
            font-size: 1.25rem;
            padding: .5em 0 .5em 1em;
            background-color: #03a9f4;
            border: none;
            border-right: 1px solid #f1f1f1;
            border-bottom: 3px solid #bdbdbd;
            color: #ffffff;
            font-weight: 400;
            text-align: left;
        }


        table tbody tr:nth-of-type(even) {
            background-color: #f1f1f1;
        }

        table tbody td {
            padding: 1em;
            border-top: none;
            border-right: 1px solid #C1C3D1;
            border-bottom: 1px solid #C1C3D1;
            border-left: none;
        }

        .cell {
            transition: .5s ease;
        }

        .cell:hover {
            cursor: pointer;
            background-color: #ffe0b2;
        }
    </fx:Style>

    <js:initialView>
        <js:View>

            <sHtml:table>
                <sHtml:thead>
                    <sHtml:tr>
                        <sHtml:h>Firstname</sHtml:th>
                        <sHtml:th>Lastname</sHtml:th>
                        <sHtml:th>Age</sHtml:th>
                    </sHtml:tr>
                </sHtml:thead>
                <sHtml:tbody>
                    <sHtml:tr dataProvider="{demoData}">
                        <sHtml:td contenteditable="true" class="cell" dataField="{firstname}"/>
                        <sHtml:td contenteditable="true" class="cell" dataField="{lastname}" />
                        <sHtml:td contenteditable="true" class="cell" dataField="{age}" />
                    </sHtml:tr>				
                </sHtml:tbody>
            </sHtml:table>
            
        </js:View>
    </js:initialView>
</js:Application>