# Utöka komponenter och plugins med EXTENSION

> Lägg till beteende i en befintlig komponent utifrån, utan att redigera dess källkod, med EXTENSION().

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

`EXTENSION(name, config, callback)` lägger till kod i varje instans av komponenten `name` (eller pluginet `@name`) när den skapas. Callbacken får instansen och dess config, precis som en deklaration, så du kan lägga till metoder, ändra alternativ eller lyssna på events. Så anpassar en applikation tredjepartskomponenter utan att forka dem.

```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>
```
