We open an Angular app and find DOM elements in the rendered page that contain attributes such as _nghost- and _ngContent -.

These attributes are generated in platform-browser.js’s DomRenderer2, within the shimContentAttribute and shimHostAttribute functions:

class EmulatedEncapsulationDomRenderer2 extends DefaultDomRenderer2 {
    / * * *@param {? } eventManager
     * @param {? } sharedStylesHost
     * @param {? } component
     * @param {? } appId* /
    constructor(eventManager, sharedStylesHost, component, appId) {
        super(eventManager);
        this.component = component;
        / * *@type {? } * /
        const styles = flattenStyles(appId + The '-' + component.id, component.styles, []);
        sharedStylesHost.addStyles(styles);
        this.contentAttr = shimContentAttribute(appId + The '-' + component.id);
        this.hostAttr = shimHostAttribute(appId + The '-' + component.id);
    }
Copy the code

const COMPONENT_REGEX = /%COMP%/g;
/ * *@type {? } * /
const NG_DEV_MODE = typeof ngDevMode === 'undefined'| |!!!!! ngDevMode;/ * *@type {? } * /
const COMPONENT_VARIABLE = '%COMP%';
/ * *@type {? } * /
const HOST_ATTR = `_nghost-${COMPONENT_VARIABLE}`;
/ * *@type {? } * /
const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;
Copy the code

More of Jerry’s original articles can be found in “Wang Zixi” :