Angular应用input和div标签页的动态创建场景

index.html:

modulesToDomaddStyleinsertStyleElement

把创建好的style添加到head节点去：

Component HTML：

<input [value]= "userInput"/>

和SAP BSP渲染html差不多：

/** * Creates an empty element using {\@link elementStart} and {\@link elementEnd} * * \@codeGenApi * @param {?} index Index of the element in the data array * @param {?} name Name of the DOM Node * @param {?=} attrsIndex Index of the element's attributes in the `consts` array. * @param {?=} localRefsIndex Index of the element's local references in the `consts` array. * * @return {?} */ function ɵɵelement(index, name, attrsIndex, localRefsIndex) { ɵɵelementStart(index, name, attrsIndex, localRefsIndex); ɵɵelementEnd(); } /** * Create DOM element. The instruction must later be followed by `elementEnd()` call. * * \@codeGenApi * @param {?} index Index of the element in the LView array * @param {?} name Name of the DOM Node * @param {?=} attrsIndex Index of the element's attributes in the `consts` array. * @param {?=} localRefsIndex Index of the element's local references in the `consts` array. * * Attributes and localRefs are passed as an array of strings where elements with an even index * hold an attribute name and elements with an odd index hold an attribute value, ex.: * ['id', 'warning5', 'class', 'alert'] * * @return {?} */ function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) { /** @type {?} */ const lView = getLView(); /** @type {?} */ const tView = getTView(); /** @type {?} */ const adjustedIndex = HEADER_OFFSET + index; ngDevMode && assertEqual(getBindingIndex(), tView.bindingStartIndex, 'elements should be created before any bindings'); ngDevMode && ngDevMode.rendererCreateElement++; ngDevMode && assertDataInRange(lView, adjustedIndex); /** @type {?} */ const renderer = lView[RENDERER]; /** @type {?} */ const native = lView[adjustedIndex] = elementCreate(name, renderer, getNamespace()); /** @type {?} */ const tNode = tView.firstCreatePass ? elementStartFirstCreatePass(index, tView, lView, native, name, attrsIndex, localRefsIndex) : (/** @type {?} */ (tView.data[adjustedIndex])); setPreviousOrParentTNode(tNode, true); /** @type {?} */ const mergedAttrs = tNode.mergedAttrs; if (mergedAttrs !== null) { setUpAttributes(renderer, native, mergedAttrs); } /** @type {?} */ const classes = tNode.classes; if (classes !== null) { writeDirectClass(renderer, native, classes); } /** @type {?} */ const styles = tNode.styles; if (styles !== null) { writeDirectStyle(renderer, native, styles); } appendChild(tView, lView, native, tNode); // any immediate children of a component or template container must be pre-emptively // monkey-patched with the component view data so that the element can be inspected // later on using any element discovery utility methods (see `element_discovery.ts`) if (getElementDepthCount() === 0) { attachPatchData(native, lView); } increaseElementDepthCount(); if (isDirectiveHost(tNode)) { createDirectivesInstances(tView, lView, tNode); executeContentQueries(tView, tNode, lView); } if (localRefsIndex !== null) { saveResolvedLocalsInData(lView, tNode); } }

core.js->animation.js->platform-browser.js

从core到animation再到platform-browser：

此时input的shadow-root里的div里还没有值：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

汪子熙 认证博客专家 前端框架 Node.js SAP JerryWang，2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师，SAP中国技术大使。2020年5月下旬，Jerry做了脑部肿瘤的开颅切除手术，对编程和人生又有了新的感悟。