# Komponenten und Plugins mit EXTENSION erweitern

> Füge einer bestehenden Komponente von außen Verhalten hinzu, ohne ihren Quellcode zu ändern, mit EXTENSION().

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

`EXTENSION(name, config, callback)` fügt jeder Instanz der Komponente `name` (oder des Plugins `@name`) beim Erstellen Code hinzu. Der Callback erhält die Instanz und ihre Config, genau wie eine Deklaration, sodass du Methoden hinzufügen, Optionen ändern oder auf Events hören kannst. So passt eine Anwendung Komponenten von Drittanbietern an, ohne sie zu 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>
```
