Daily Reflections (2020/01/03)

Topic Overview

Understanding of the Shadow (Shadow) DOM of
How to modify a yellow background form autofill?
Understanding of the arguments of

Subject to answer

Understanding of the Shadow (Shadow) DOM of

Concept: is the ability of the browser, which allows time to render the document (document) in the browser DOM element is inserted into a sub-tree structure in which the Dom, but it is special, tree subtree (shadow-dom) and not in the main DOM tree. We can imagine to use one component or the Vue React in a structure of the HTML, Style encapsulated structure.
```

<video src="test"></video> 
```
structure
- document: is our normal document document
- shadow host: for an internal shadow-domelement, the element which necessarily requires a host, for the example above, the videotag, the host is an element of the shadow-dom
- shadow-root: via createShadowRoot(will be referred to hereinafter) returns the document fragment is called shadow-root. It and its descendant elements, all will be hidden from users, but they are real, in chrome, we can usually examine the elements to see their specific DOM implementation. In video, for example, pause, play, volume control, full-screen buttons, progress bars are all descendants of shadow-root. They will be displayed on the screen, but they DOM structure is not visible to the user during work.
- contents: is embodied in the above-mentioned `` DOM each subassembly
Objective: Shadow-dom is free in the DOM tree node tree, but he created DOM elements based on ordinary (non-document), and Shadow-dom node after the creation can visually see from the interface. More importantly, Shadow-dom has a good seal. This is a browser to provide the "package" feature provides a powerful technique to hide some of the implementation details.
Control: pseudo elements, we can control the style shadow-dom in the DOM structure. In chrome, view the shadow-dom structure (If you can not see the shadow-dom need to manually open), you can see that each node have added a pesudo property, with these attributes, we can control by way of pseudo-elements
```
<div pseudo="-webkit-media-controls-overlay-enclosure">
  <input pseudo="-internal-media-controls-overlay-cast-button" type="button" aria-label="在远程设备上播放" style="display: none;">
</div>
```

//定义一个叫做 PopUpInfo的类，它继承自HTMLElement
class PopUpInfo extends HTMLElement {
  constructor() {
    // 必须首先调用 super方法
    super();
    //创建 shadow root
    var shadow = this.attachShadow({mode: 'open'});
    // 创建 span
    var wrapper = document.createElement('span');
    wrapper.setAttribute('class','wrapper');
    var icon = document.createElement('span');
    icon.setAttribute('class','icon');
    icon.setAttribute('tabindex', 0);
    var info = document.createElement('span');
    info.setAttribute('class','info');
    // 获取属性的内容并将内容添加到 info元素内
    var text = this.getAttribute('text');
    info.textContent = text;
    // 插入 icon
    var imgUrl;
    if(this.hasAttribute('img')) {
      imgUrl = this.getAttribute('img');
    } else {
      imgUrl = 'img/default.png';
    }
    var img = document.createElement('img');
    img.src = imgUrl;
    icon.appendChild(img);
    // 为 shadow dom添加一些 CSS样式
    var style = document.createElement('style');
    style.textContent = '.wrapper {' +
                               'position: relative;' +
                            '}' +

                             '.info {' +
                                'font-size: 0.8rem;' +
                                'width: 200px;' +
                                'display: inline-block;' +
                                'border: 1px solid black;' +
                                'padding: 10px;' +
                                'background: white;' +
                                'border-radius: 10px;' +
                                'opacity: 0;' +
                                'transition: 0.6s all;' +
                                'position: absolute;' +
                                'bottom: 20px;' +
                                'left: 10px;' +
                                'z-index: 3;' +
                              '}' +

                              'img {' +
                                'width: 1.2rem' +
                              '}' +

                              '.icon:hover + .info, .icon:focus + .info {' +
                                'opacity: 1;' +
                              '}';
    // 将所创建的元素添加到 Shadow DOM上
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(info);
  }
}
// 定义新的元素
window.customElements.define('popup-info', PopUpInfo)

How to modify form autofill yellow background

Phenomenon: When the browser encounters type = "text" and type = "password" of inputthe label in close proximity, will trigger an automatic filling behavior of the browser. The default is yellow background

Use of -webkit-autofillproperty

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 3px 100px #eee inset; //改变填充背景色
}

Close the browser that comes with the form filling function

<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">

Understanding of the arguments of

Definition: a class corresponding to the array of objects is passed to the function. Local variables are all (non-arrow) functions are available. You can use argumentsthe object referenced in the function parameters of the function. This object contains the parameters passed to each function, the first parameter is at index 0
```
//如果一个函数传递了三个参数，可以以如下方式引用他们
arguments[0]
arguments[1]
arguments[2]
//参数也可以被设置
arguments[1] = 'new value';
```

Properties: If the argument invoked more than a formal declaration accepting the parameters, you can use the argumentsobject. This technique can be transferred to a variable number of function parameters is useful. Used arguments.lengthto determine the parameters passed to the function number, then uses argumentsthe object to process each parameter. To determine the function signature number in (input) parameters, use the Function.lengthproperty

// arguments.callee：指向当前执行的函数
//arguments.caller ：指向调用当前函数的函数。
// arguments.length：指向传递给当前函数的参数数量。
// arguments[@@iterator]：返回一个新的Array迭代器对象，该对象包含参数中每个索引的值
function test(x,y,z){
    console.log(arguments.callee); //[Function: test]
    console.log(arguments.caller); //undefined
    console.log(arguments.length);//2
  console.log(Function.length);//1
    console.log(arguments[0], arguments[1], arguments[3]); // 1 2 undefined
}
test(1,2)

The arguments object is not an Array. It is similar to Array, but in addition to the length property and does not have any elements other than the index Array property. You can convert an array of parameters to be true.
```
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015
const args = Array.from(arguments);
const args = [...arguments];
```

Use the parameters typeof

console.log(typeof arguments);    // 'object'
// arguments 对象只能在函数内使用
function test(a){
    console.log(a,Object.prototype.toString.call(arguments));
    console.log(arguments[0],arguments[1]);
    console.log(typeof arguments[0]);
}
test(1);
/*
1 "[object Arguments]"
1 undefined
number
*/