wangzaixiang/index.html

## index.html
<meta name="viewport" content="width=device-width">
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="my-element.js"></script>
<script type="module" src="sku.js"></script>

<script>
    // document.onscroll = function(event){
    //     var msg = document.getElementById("msg");
    //     // console.info("document scroll " , event);
    //     msg.innerHTML = "scroll event: " + event.timeStamp;
    // }
    function onload(){
        for(var i=0; i<1024*16; i++) {
            var elem = document.createElement("my-sku");
            elem.title = "SKU " + i;
            document.body.appendChild(elem);
        }
    }
</script>
<style>
    my-sku {
        float: left;
    }

    .inner {
            width: 241px;
            height: 153px;
            border-width: 0 0 1px 1px;
            border-style: solid;
            border-color: #e4e4e4;
            overflow: hidden;
            font-size: 14px;
        }

        .inner .cover {
            width: 100px;
            float: left;
            height: 116px;
            overflow: hidden;
            margin-top: 18px;
            margin-right: 10px;
            margin-left: 8px;
            background: #f6f6f6;
        }

        .inner .detail {
            overflow: hidden;
            padding-top: 18px;
            width: 115px;
        }
        .inner .detail .title {
            margin-top: 0;
            height: 40px;
            overflow: hidden;
        }

        .inner .detail .price {
            color:#ff0036;
            margin-top: 11px;
        }

        .enter .detail .price {
            color:blue;
            margin-top: 10px;
            font-size: 16px;
        }

        .inner .detail .action {
            white-space: nowrap;
            background: #ff0036;
            margin-top: 18px;
        }
</style>

<body onload="onload();">
    <!--
    Can you look at me?
    <my-element id="me"></my-element>
    <p>><a onclick="document.getElementById('me').mood += '1';">ooo</a>

    </p>
    <my-circle r="40" name="wangzx"></my-circle>
    <div id="msg"></div>
    <div>Place SKU Here</div>
-->
    <my-sku></my-sku>

</body>

## sku.js
import {LitElement, css, html} from 'lit-element/lit-element';
import {classMap} from 'lit-html/directives/class-map';

class MySku extends LitElement {

    static get properties() {
        return {
            title: { type: String   },
            image: { type: Array    },
            enter: { type: Boolean  }
        }
    }

    constructor(){
        super();
        this.title = "爱豆薯片好吃的网红小零食礼包女生散装自选整箱小吃休闲食品10包";
        this.image = "sku1.jpeg";
        // this.classes = { inner: true };

    }

    static get styles() {
        return css`
        :host {
            display: block;
        }
        .inner {
            width: 241px;
            // height: 153px;
            border-width: 0 0 1px 1px;
            border-style: solid;
            border-color: #e4e4e4;
            overflow: hidden;
            font-size: 14px;
        }

        .inner .cover {
            width: 100px;
            float: left;
            height: 116px;
            overflow: hidden;
            margin-top: 18px;
            margin-right: 10px;
            margin-left: 8px;
            background: #f6f6f6;
        }

        .inner .detail {
            overflow: hidden;
            padding-top: 18px;
            width: 115px;
        }
        .inner .detail .title {
            margin-top: 0;
            height: 40px;
            overflow: hidden;
        }

        .inner .detail .price {
            color:#ff0036;
            margin-top: 11px;
        }

        .enter .detail .price {
            color:blue;
            margin-top: 10px;
            font-size: 16px;
        }

        .inner .detail .action {
            white-space: nowrap;
            background: #ff0036;
            margin-top: 18px;
        }
        `
    }

    handleMouseEnter(e) {
        this.enter = true;
        console.info("enter");
    }
    handleMouseExit(e){
        this.enter = false;
        console.info("exit");
    }

    // createRenderRoot() {
    //     return this;
    // }

    render() {
        const classes = {enter: this.enter, inner: true};
        return html`
        <div class=${classMap(classes)}>
    <div class="cover" @mouseenter=${this.handleMouseEnter} @mouseout=${this.handleMouseExit}>
        <a title=${this.title}>
        	<img src=${this.image} class="">
        </a>
    </div>
    <div class="detail">
    	<p class="title">
    	  <a title=${this.title}>${this.title}</a>
    	</p>
    	<p class="price">￥14.9</p>
    	<p class="action">
    	  <a title=${this.title}>
    	    <span class="coupon" style="text-align:center;width:100%;">立即购买</span>
    	  </a>
    	</p>
    </div>
</div>`;
    }

}

customElements.define("my-sku", MySku);
	<meta name="viewport" content="width=device-width">
	<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
	<script type="module" src="my-element.js"></script>
	<script type="module" src="sku.js"></script>

	<script>
	// document.onscroll = function(event){
	// var msg = document.getElementById("msg");
	// // console.info("document scroll " , event);
	// msg.innerHTML = "scroll event: " + event.timeStamp;
	// }
	function onload(){
	for(var i=0; i<1024*16; i++) {
	var elem = document.createElement("my-sku");
	elem.title = "SKU " + i;
	document.body.appendChild(elem);
	}
	}
	</script>
	<style>
	my-sku {
	float: left;
	}

	.inner {
	width: 241px;
	height: 153px;
	border-width: 0 0 1px 1px;
	border-style: solid;
	border-color: #e4e4e4;
	overflow: hidden;
	font-size: 14px;
	}

	.inner .cover {
	width: 100px;
	float: left;
	height: 116px;
	overflow: hidden;
	margin-top: 18px;
	margin-right: 10px;
	margin-left: 8px;
	background: #f6f6f6;
	}

	.inner .detail {
	overflow: hidden;
	padding-top: 18px;
	width: 115px;
	}
	.inner .detail .title {
	margin-top: 0;
	height: 40px;
	overflow: hidden;
	}

	.inner .detail .price {
	color:#ff0036;
	margin-top: 11px;
	}

	.enter .detail .price {
	color:blue;
	margin-top: 10px;
	font-size: 16px;
	}

	.inner .detail .action {
	white-space: nowrap;
	background: #ff0036;
	margin-top: 18px;
	}
	</style>

	<body onload="onload();">
	<!--
	Can you look at me?
	<my-element id="me"></my-element>
	<p>><a onclick="document.getElementById('me').mood += '1';">ooo</a>

	</p>
	<my-circle r="40" name="wangzx"></my-circle>
	<div id="msg"></div>
	<div>Place SKU Here</div>
	-->
	<my-sku></my-sku>

	</body>
	import {LitElement, css, html} from 'lit-element/lit-element';
	import {classMap} from 'lit-html/directives/class-map';

	class MySku extends LitElement {

	static get properties() {
	return {
	title: { type: String },
	image: { type: Array },
	enter: { type: Boolean }
	}
	}

	constructor(){
	super();
	this.title = "爱豆薯片好吃的网红小零食礼包女生散装自选整箱小吃休闲食品10包";
	this.image = "sku1.jpeg";
	// this.classes = { inner: true };

	}

	static get styles() {
	return css`
	:host {
	display: block;
	}
	.inner {
	width: 241px;
	// height: 153px;
	border-width: 0 0 1px 1px;
	border-style: solid;
	border-color: #e4e4e4;
	overflow: hidden;
	font-size: 14px;
	}

	.inner .cover {
	width: 100px;
	float: left;
	height: 116px;
	overflow: hidden;
	margin-top: 18px;
	margin-right: 10px;
	margin-left: 8px;
	background: #f6f6f6;
	}

	.inner .detail {
	overflow: hidden;
	padding-top: 18px;
	width: 115px;
	}
	.inner .detail .title {
	margin-top: 0;
	height: 40px;
	overflow: hidden;
	}

	.inner .detail .price {
	color:#ff0036;
	margin-top: 11px;
	}

	.enter .detail .price {
	color:blue;
	margin-top: 10px;
	font-size: 16px;
	}

	.inner .detail .action {
	white-space: nowrap;
	background: #ff0036;
	margin-top: 18px;
	}
	`
	}

	handleMouseEnter(e) {
	this.enter = true;
	console.info("enter");
	}
	handleMouseExit(e){
	this.enter = false;
	console.info("exit");
	}

	// createRenderRoot() {
	// return this;
	// }

	render() {
	const classes = {enter: this.enter, inner: true};
	return html`
	<div class=${classMap(classes)}>
	<div class="cover" @mouseenter=${this.handleMouseEnter} @mouseout=${this.handleMouseExit}>
	<a title=${this.title}>
	<img src=${this.image} class="">
	</a>
	</div>
	<div class="detail">
	<p class="title">
	<a title=${this.title}>${this.title}</a>
	</p>
	<p class="price">￥14.9</p>
	<p class="action">
	<a title=${this.title}>
	<span class="coupon" style="text-align:center;width:100%;">立即购买</span>
	</a>
	</p>
	</div>
	</div>`;
	}

	}

	customElements.define("my-sku", MySku);