# Web Component 实现一个带描述的图片

# index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>带描述的图片</title>
	<link rel="import" href="./image.html">
</head>
<body>
	<x-image src="./default.png" width="290" height="160" alt="带文字描述的图片"></x-image>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11

# image.html

<template>
	<style>
		:host{
			display: block;
		}
		:host .x-image{
			position: relative;
			display: block;
			margin: 0;
			padding: 0;
			width: 100%;
		}
		:host .x-image .x-image-image{
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		:host .x-image, .x-image-text{
			position: absolute;
			display: block;
			bottom: 0;
			padding: 10px 5px;
			left: 0;
			right: 0;
			color: #fff;
			background: rgba(0,0,0,0.5)
		}
	</style>
	<div class="x-image">
		<span class="x-image-image">
			<img class="image" src="" alt="image" height="200">
		</span>
		<span class="x-image-text">demo</span>
	</div>
</template>
<script>
	(function(doc){
		"use strict";
		let XImage = Object.create(HTMLElement.prototype, {
			height:{
				get: function(){return this._height},
				set: function(height){
					this._height = height
					console.log(this._innerBanner)
					this._innerBanner.style.height = height+'px'
					this._innerBanner.querySelector('.image').style.height = height+'px'
				}
			},
			width:{
				get: function(){return this._width},
				set: function(width){
					this._width = width
					this._innerBanner.style.width = width+'px'
					this._innerBanner.querySelector('.image').style.width = width+'px'
				}
			},
			alt:{
				get: function(){return this._width},
				set: function(alt){
					this._alt = alt
					console.log()
					this._innerBanner.querySelector('.x-image-text').innerHTML = alt
					this._innerBanner.querySelector('.image').setAttribute('alt', alt)
				}
			},
			src: {
				get: function(){return this._src},
				set: function(src){
					this._src = src
					this._innerBanner.querySelector('.image').setAttribute('src', src)
				}
			}
		})

		XImage.createdCallback = function(){
			let shadowRoot = this.createShadowRoot()
			let template = doc.querySelector('template')
			let node = document.importNode(template.content, true)
			console.log(node)
			this._innerBanner = node.querySelector('.x-image')
			let height = this._height || Number(this.getAttribute('height')),
				width = this._width || Number(this.getAttribute('width')),
				alt = this._alt || String(this.getAttribute('alt')),
				src = this._src || String(this.getAttribute('src'))
			if(!isNaN(height) || !isNaN(width)) {
				this.height = height
				this.width = width
			}
			if(alt){
				this.alt = alt
			}
			this.src = src
			shadowRoot.appendChild(node)
		}
		document.registerElement('x-image', {prototype: XImage})
	})(document.currentScript.ownerDocument)
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98