5 lines
28 KiB
JSON
5 lines
28 KiB
JSON
|
{
|
||
|
|
"id": "guide/elements",
|
||
|
|
"title": "Angular elements overview",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/elements.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"angular-elements-overview\">Angular elements overview<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/elements#angular-elements-overview\"><i class=\"material-icons\">link</i></a></h1>\n<p><em>Angular elements</em> are Angular components packaged as <em>custom elements</em> (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.</p>\n<div class=\"alert is-helpful\">\n<p> For the sample app that this page describes, see the <live-example></live-example>.</p>\n</div>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements\">Custom elements</a> are a Web Platform feature currently supported by Chrome, Edge (Chromium-based), Firefox, Opera, and Safari, and available in other browsers through polyfills (see <a href=\"guide/elements#browser-support\">Browser Support</a>).\nA custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code.\nThe browser maintains a <code>CustomElementRegistry</code> of defined custom elements, which maps an instantiable JavaScript class to an HTML tag.</p>\n<p>The <code>@angular/elements</code> package exports a <code><a href=\"api/elements/createCustomElement\" class=\"code-anchor\">createCustomElement</a>()</code> API that provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API.</p>\n<p>Transforming a component to a custom element makes all of the required Angular infrastructure available to the browser.\nCreating a custom element is simple and straightforward, and automatically connects your component-defined view with change detection and data binding, mapping Angular functionality to the corresponding native HTML equivalents.</p>\n<div class=\"alert is-helpful\">\n<p> We are working on custom elements that can be used by web apps built on other frameworks.\nA minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality.\nFor more about the direction of development, check out this <a href=\"https://www.youtube.com/watch?v=Z1gLFPLVJjY&t=4s\">video presentation</a>.</p>\n</div>\n<h2 id=\"using-custom-elements\">Using custom elements<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/elements#using-custom-elements\"><i class=\"material-icons\">link</i></a></h2>\n<p>Custom elements bootstrap themselves - they start automatically when they are added to the DOM, and are automatically destroyed when removed from the DOM. Once a custom element is added to the DOM for any page, it looks and behaves like any other HTML element, and does not require any special knowledge of Angular terms or usage conventions.</p>\n<ul>\n<li>\n<p><b>Easy dynamic content in an Angular app</b></p>\n<p>Transforming a component to a custom element provides an easy path to creating dynamic HTML content in your Angular app. HTML content that you add directly to the DOM in an Angular app is normally displayed without Angular processing, unless you define a <em>dynamic component</em>, adding your own code to connect the HTML tag to your app data, and participate in change detection. With a custom element, all of that wiring is taken care of automatically.</p>\n</li>\n<li>\n<p><b>Content-rich applications</b></p>\n<p>If you have a content-rich app, such as the Angular app that presents this documentation, custom elements let you give your content providers sophisticated Angular functionality without requiring knowledge of Angular. For example, an Angular guide like this one is added
|
||
|
|
}
|