วิธีสร้างองค์ประกอบที่กำหนดเองของเว็บคอมโพเนนต์เพื่อทำงานกับทั้งรายละเอียด

ฉันต้องการสร้างส่วนประกอบที่ควรทำงานกับสเป็คทั้งสองcustom elements spec v0ซึ่งได้เลิกใช้แล้วและcustom elements spec v1เป็นเวอร์ชันที่เสถียรล่าสุด

ถ้าฉันสร้างส่วนประกอบที่มีcustom elements v0แอพบางตัวจะประสบปัญหาเนื่องจากกำลังใช้งานpolymer 2และสูงกว่าและปัญหาเดียวกันกับpolymer 1แอปพลิเคชันที่ใช้งานไม่ได้กับcustom elements v1สเปค

ฉันไม่สามารถควบคุมแอปพลิเคชันเพื่อเปลี่ยนโพลีฟิลบางแอพพลิเคชั่นต้องใช้โพลีฟิลรองรับสเป็คเก่าและบางอันใช้โพลีฟิลล์ใหม่

ฉันกำลังมองหาโซลูชันที่แข็งแกร่งในการรวมข้อมูลจำเพาะเพื่อเรียกใช้องค์ประกอบแบบกำหนดเองของฉันในแอปพลิเคชันทั้งหมดโดยไม่คำนึงถึงรุ่น polyfills ฉันสามารถเพิ่มโปลิฟิลหรือตัวอย่างใด ๆ ลงในคอมโพเนนต์ของฉันเพื่อให้สามารถทำงานได้ทุกที่ฉันไม่พบไลบรารี่หรือโพลีฟิลล์ใด ๆ ที่รองรับสเปคทั้งสองในงานวิจัยของฉัน

ฉันวางแผนที่จะเขียนอะแดปเตอร์ที่สามารถรวมทั้งสเปคเช่นการทำแผนที่ที่กล่าวถึงด้านล่างสำหรับการโทรกลับที่แนบมาอินพุตในความคิดนี้จะได้รับการชื่นชมมาก

connectedCallback(){
    this.attachedCallback();
}

ฉันพยายามใช้stenciljsแต่สามารถใช้งานได้กับสเปคองค์ประกอบที่กำหนดเองรุ่นล่าสุดเท่านั้น ฉันไม่พบวิธีการปรับแต่งเพื่อให้ทำงานกับสเป็คก่อนหน้านี้

โปรดแนะนำทางเลือกที่ใช้การได้และวิธีแก้ปัญหาที่เป็นไปได้สำหรับสถานการณ์ดังกล่าวข้างต้น

โดยทั่วไปส่วนประกอบของคุณมีการขึ้นต่อกันบางอย่างซึ่งกำหนดไว้ใน polyfills ไม่ว่าโดยตรงหรือโดยอ้อม หากเราพิจารณาการขึ้นต่อกันเหล่านี้เป็นโหนดของกราฟการพึ่งพาเรามีปัญหาของกราฟที่แตกต่างกัน อาจเป็นไปได้ว่าโหนดมีอยู่ในกราฟทั้งสอง แต่มีพฤติกรรมแตกต่างกัน (เก่ากว่าและใหม่กว่าเดิมfunction) และอาจเป็นไปได้ว่าบางโหนดที่มีอยู่ในกราฟขาดหายไปในอีกโหนดหนึ่ง แน่นอนคุณสามารถใส่ polyfills ของคุณเองหรืออะไรทำนองนั้นได้ แต่จากนั้นคุณจะต้องบำรุงรักษา polyfills ซึ่งอาจมีประโยชน์น้อยกว่า

วิธีที่ดีกว่าในความคิดของฉันคือการใช้functionเช่น

function getWebComponentsVersion() {
    //Return v1 if it's v1 and v0 if it's v0
}

ฉันไม่แน่ใจว่าจะใช้งานได้functionอย่างไร แต่หากมีตัวใดตัวหนึ่งfunctionที่ให้เวอร์ชั่นที่เหมาะสมหรือมีความแตกต่างที่เห็นได้ชัดระหว่างฟังก์ชันการทำงานคุณสามารถใช้ฟังก์ชันข้างต้นได้ จากนั้นเรียกใช้รหัสนี้:

if (getWebComponentsVersion() === "v1") {
    //code for v1
} else {
    //code for v0
}

Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020.ฉันสงสัยว่าคุณจะทราบว่า

สิ่งที่คุณสามารถทำได้คือไปที่Can I useเว็บไซต์และตรวจสอบเวอร์ชันการสนับสนุนของเบราว์เซอร์เพื่อดูว่าเบราว์เซอร์ใดควรโหลดเวอร์ชันองค์ประกอบที่กำหนดเอง ...

หลังจากนั้นให้ดำเนินการด้านล่างเพื่อตรวจสอบเบราว์เซอร์และรุ่นและโหลดองค์ประกอบที่กำหนดเองที่ถูกต้องสำหรับเบราว์เซอร์ที่ต้องการตามลำดับ ( เพิ่มเติมที่นี่ ) หากคุณไม่ต้องการใช้ห้องสมุดภายนอก

หากคุณไม่พอใจกับการใช้ไลบรารี่ภายนอกลองBowserเพื่อตรวจสอบเวอร์ชั่นแพลตฟอร์มและอื่น ๆ

navigator.browserSpecs = (function(){
    var ua = navigator.userAgent, tem, 
        M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return {name:'IE',version:(tem[1] || '')};
    }
    if(M[1]=== 'Chrome'){
        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem != null) return {name:tem[1].replace('OPR', 'Opera'),version:tem[2]};
    }
    M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem = ua.match(/version\/(\d+)/i))!= null)
        M.splice(1, 1, tem[1]);
    return {name:M[0], version:M[1]};
})();

console.log(navigator.browserSpecs); //Object { name: "Firefox", version: "42" }

if (navigator.browserSpecs.name == 'Chrome') {
    // Do something for Chrome.
    if (navigator.browserSpecs.version > 76) {
        // Do something for Chrome versions greater than 76 like load v1.
    }
}
else {
    // Do something for all other browsers.
}