# Componenten en plugins uitbreiden met EXTENSION

> Voeg van buitenaf gedrag toe aan een bestaande component, zonder haar broncode te wijzigen, met EXTENSION().

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: nl
Content-SHA256: cab1e2718f3aabde8489847e7462e27fc51309aa230bb7be39b4cf1bd6fc836d
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

`EXTENSION(name, config, callback)` voegt code toe aan elke instantie van de component `name` (of van de plugin `@name`) wanneer die wordt aangemaakt. De callback krijgt de instantie en haar config, precies als een declaratie, zodat je methoden kunt toevoegen, opties kunt wijzigen of naar events kunt luisteren. Zo past een applicatie componenten van derden aan zonder ze te forken.

```html public/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<ui-component name="label" config="text:Hello"></ui-component>

	<script>

		COMPONENT('label', 'text:', function(self, config) {
			self.make = function() {
				self.html('<span></span>');
				self.find('span').text(config.text);
			};
		});

		EXTENSION('label', 'suffix:!', function(self, config) {
			self.shout = function() {
				self.find('span').text(config.text.toUpperCase() + config.suffix);
			};
			self.extended = true;
		});

	</script>

</body>
</html>
```
